We present you a list of Adobe Photoshop plugins that will make your life as a web designer a lot easier. Let’s face this fact: Photoshop is still the number one design tool that a designer should master. The mastery of Photoshop will always be tantamount to the learning of other Adobe software programs.

Personally, I consider Photoshop as the mother of all Adobe platform software collection. It is versatile and jam-packed. Everything you need (well, almost all) is in there. You just have to stretch your creativity a wee bit. But being imperfect too, Photoshop has its limits at times. Sometimes, it cannot seem to perform the way we want it to be.

Designers often have problems with Photoshop functions that are non-existent. This predicament calls for additional software. So what designers do is search, download and open another software just to fit the needs of their imagination. This, I think, might cause some time. And for a designer, time is always of the essence. With this, it is very advantageous to have just one software that could cater to all the needs.

Now, you, as a designer have two choices: Either you get rid of Photoshop and look for a more versatile software (which I think would be very difficult, if not impossible), or look for solutions that could make Photoshop better. Hence, plugins.


Table of Contents:

  1. 20 Photoshop Plugins for Your Convenience
  2. History of Photoshop & Cool Facts Behind the Living Legend

20 Photoshop Plugins for Your Convenience

Plugins are software extensions that you can download and install within a program. Plugins help make the world a better place by unifying all the creative solutions in just one software. It becomes a one stop shop for designer needs. It saves time, effort and in the long run, money for designers and this also allows them to stretch their creativity more.


Because I love Photoshop very much, I looked for plugins that might help designers in their design needs. Here they are:

1. CSS3Ps

If you’re having trouble with the sizing, coloring and naming of your CSS elements, this plug-in will get you started. What does it do? Well, it just gives you the exact size of the layer in CSS3 codes, the color, the font-size and family of your design element. Just copy the code and paste it in your CSS code editor. CSS3Ps is fast and exact. Just click on the element, open the plug-in and wait for it to tell you how it should be placed.

photoshop-plug-in-02

2. Cut and Slice Me

Cut and Slice Me as its name implies, helps you cut images to serve as assets to your website for further coding. It gives you the one-click ease to realize your web design dreams! What I like about this plug-in is it’s convenience. Just select, then click. It’s also very versatile! It cuts the images the way you want them to be.

photoshop-plug-in-03

3. Adobe’s Kuler

Adobe’s Kuler is simply the cooler color picker tool. It allows you to see other users’ color schemes. This will help you know what colors suit each other!

photoshop-plug-in-04

4. Guide Guide

Guide Guide is an intelligent plug-in that will allow you to set guides for your designs with ease. It automatically and precisely puts guidelines along your design. What I love about Guideguide is it’s mathematical. It knows when your guide fits the proportion of your design. It also easy to use because you just have to type the exact location of the guide and it’s all set.

photoshop-plug-in-05

5. CSSHAT

CSSHat is a tool that makes your webpages magically pop out of a hat. It is an amazing plug-in that helps you code your CSS! Just select the layer, copy the code to the clipboard and enjoy life. What’s good about CSSHat is it is simple and easy to manipulate because the syntax it uses is more readable.

photoshop-plug-in-06

6. Divine Elemente

Divine Elemente is a flexible web design Photoshop plug-in cum software that bridges PSD designs to WordPress themes! It mainly caters the blogging industry and the good thing here is you are not required to do the actual coding!

photoshop-plug-in-07

7. SiteGrinder

SiteGrinder allows you to make webpages out of PSDs. In SiteGrinder, you don’t actually need to code or slice anything. Like Divine Elemente, SiteGrinder is a one-click tool for designing web pages! Pretty cool, huh?

photoshop-plug-in-08

8. Subtle Patterns

Do you want to create cool and very detailed background patterns for your website or design? Well, this plug-in is for you. With a vast database of uploaded patterns, Subtle Patterns helps the designer to choose a pattern easily. Thus removing the burden of creating (or searching for) them! You’re ensured of the quality of patterns here as they are created by the users themselves. Plus, they are very subtle. Your viewers won’t get too much distracted with the intricate pattern your website has!

photoshop-plug-in-09

9. WebZap

WebZap is another functional plugin designed to increase the productivity of web designers in doing mockups and UIs.

photoshop-plug-in-10

10. Perfect Resize

This software, formerly known as Genuine Fractals, is mainly a photographic plug-in that allows you to blow up images without destroying the sharpness of the picture. This is good for doing background images, or headers. Try it. You can have a 30-day trial. This plug-in can now be also bought as a stand alone software.

photshop-plugin

 

11. Enigma

Enigma is another image exporter plug-in for Photoshop that allows you to produces lossless images (up to 80% optimization) in a very simple and easy to use UI.

photoshop-plug-in-19

12. Skeuomorphism

With the explosion of the flat design trend, skeumorphic websites will definitely have trouble transforming their designs to flat. (That is, if they want to ride the bandwagon) But with Skeumorphism.it, you will be able to transform your skeumorphic PSD layout to a flat design! Well, what it actually does is it removes the unneeded layer effects of the design. But it’s a pretty good plug-in to download.

photoshop-plug-in-18

13. Punchcut

Punchcut’s Expanding Universe Toolset for Managing Screen Resolutions allows you to select from a set of PSDs where you can see the devices for ‘comping’ them. It basically helps you make your website look better in all browsers of all sizes.

photoshop-plug-in-17

14. SuitecaseFusion

Suitcase Fusion is a good font management Photoshop plug-in. It lets users preview the fonts that the design will be using, organizes them and gives the user ease of access. With SuiteCase, you can collect and select fonts from WebINK and Google Web Fonts.

photoshop-plug-in-16

16. SuperPNG

The use of PNG files in web designing has been a necessity. Because of PNG’s transparency features, it becomes a very potent tool in putting designs in your webpages. Because of this, the need to create good PNG files becomes very important as well. SuperPNG allows you to do that. It supports lossless compressions and can be read by all modern web browsers! It also supports Alpha channel control, variable compression, ICC profile embedding and metadata saving.

photoshop-plug-in-14pg

17. AtlasCSS

Atlas CSS allows you to generate a coordinated CSS code using a script. You just need to collate all your icons in one Photoshop folder and viola! You have an instant stylesheet!

photoshop-plug-in-13

18. Corner Editor

Corner Editor is a flexible Photoshop script that allows you to make the corners of any polygonal shape round. It can also run multiple and smooth corners. Plus, it can also edit multiple layers at one click.  Well, for one thing, this plug-in is a rounded-corner haven for a designer.

photoshop-plug-in-12

19. Tncyh Panel

This one is not really purely web design-inclined. Tynch panel is best for laying out pictures. It artistically and automatically puts pictures in their proper juxtaposition. However, it becomes an advantage for designers to have this because you need to place pictures once in a while too.

.photoshop-plug-in-21

20. Icon Plugin

Want to create desktop icons or favicons? This free software allows you to do that!

photoshop-plug-in-11

Conclusion

Plug-ins are very helpful for a designer. They make life better. They are instantaneous and very convenient to use. But sometimes, the good thing is the difficult to attain. Plugins are just aids whenever we encounter a designing roadblock. It’s still better, in some cases, to put a lot of effort in your design. Good luck!

As we love Photoshop so much in the next section we will present a brief history of it.


History of Photoshop & Cool Facts Behind the Living Legend

We all love Photoshop but only a small group of people knows the history of Photoshop. It has done wonders for all designers, photographers and hobbyists by providing a one-program solution for all the design needs. It is very flexible, easy to use and readily available. Its tools are so perfectly fitting for all the design needs, you’ll never look for another! This is the main reason why we all love this amazing program, right?


But behind all of these quirky features, do we all know where it all began? Aren’t we all curious where our favourite software came from? Who made it? Well, this calls for a history lesson.

History of Photoshop, Adobe Photoshop!

The tale began in 1987 when PhD student Tom Knoll wrote a graphics application in a Macintosh Plus. The software was used to display gray scale images on a monochrome display. Knoll called it ‘Display.’ We could now consider Display as the unofficial father of our beloved Photoshop.

History-of-Photoshop-04

Photo from Daniel Meadows

History-of-Photoshop-02

John Knoll

Photo by Doodleme

The Knoll Brothers

Thomas Knoll

Photo by Adobe Blogs

Tom’s brother John, who works at Industrial Light and Magic, saw the program. Being a photo-enthusiast, John persuaded his brother to turn it into an image editing software. He eventually finished it after taking a six-month break from his studies. Tom tried to call it ImagePro (image, if this was pursued, we will all say, I ImagePro-ed my photo). Good thing was, the name was already taken for copyright so he opted to call it Photoshop (version 0.07). Tom eventually managed to sell it to a scanner manufacturer.

Photoshop’s Early Versions

On September 1989, everything changed for Photoshop when Adobe bought it. A year after, on February 1, 1990, Photoshop 1.0 was released. It included digital color editing and retouching. It was dedicated for use in high-end platforms such as the SciTex and costs $300 the for basic photo retouching.

History-of-Photoshop-05

Photo from Daniel Meadows

Photoshop improved its features as it was set for version 2.0. And so it was, on June 1, 1990 when Photoshop released its second version adding Paths, CMYK color and the Pen tool. We attribute much of the Pen tool to a guy named Mark Hamburg.

History-of-Photoshop-06

Photo from Daniel Meadows

Version 2.5 was later released in November as it addressed for the first release of the Windows OS. Photoshop also added palettes in this version.

In 1994, Photoshop 3.0 was released. This version now included layers. This saved the arses of a lot of designers who loved to add a more complex feel in their creations. Tom Knoll was the man who made all these possible.

photoshop31

Photo by Photoshop news

It took two years for Photoshop to release version 4.0, which added adjustment layers and macros. Imagine if Photoshop developers haven’t thought of these, we will still take a very long time to put watermark on our photos. They made life easier. Also, 4.0 also started the user interface we all see today.

History-of-Photoshop-07

Photo by Photoshop news

On May 1 1998, version 5.0 came out featuring its newest functions the editable type and the ability to undo actions various times using the History palette. Area selection was also made easier with the addition of the magnetic lasso tool. A year later, 5.5 came out and added the Save for Web feature. (Thanks to 5.5 we can export PNGs!)

History-of-Photoshop-08

Photo by Daniel Meadows

As the new millennium dawned, Photoshop 6.0 came out. Vector shapes were featured in this version. The type tool was also revolutionized by adding a feature where you can directly type text even without defining a bounding box to it. Blending options were also added.

History-of-Photoshop-10

Photo from Graphicssoft

Two years later came 7.0, which introduced a new file browser that allowed the users to easily look through folders. Brushes were also added together with the patch tool.

History-of-Photoshop-11

Photo by Daniel Meadows

Creative Series Era

As Photoshop continued to evolve, it came with cooler and cooler features. This was marketed into a vast pack of software in which Photoshop was the leading brand. It was called the Creative Suite. It basically catered to all design needs, ranging from graphic design to layouting, photography to film.

Photoshop CS (or Photoshop 8.0) was the first version to come out in 2003. It had a Counterfeit Deterrence System (CDS), which reused duplication of paper currency. With the release of CS came also scripts and languages. Grouping of layers was also introduced in this version, making the usage of the program easier.

History-of-Photoshop-11-2

Photo from Wiki Images

Meanwhile, in 2005, CS2 came out. This version added the red-eye removal tool, and vanishing point tool. Smart objects, which allowed users to blow up or trim down images without it loosing quality, was also introduced.

History-of-Photoshop-13

Photo from Bleeping Computer

With the release of CS3 in 2007, speed was the major change.  CS3 optimized changes with the tools. It made the navigation and usage of Photoshop faster and easier. Adobe Camera Raw and the Quick Selection Tool were also introduced.

History-of-Photoshop-14

Photo from Ruang Software

In 2008, CS4 came out. It was evident that panning and zooming were made easier. Mask and Adjustment panels were also included which made Masking easier.

History-of-Photoshop-15

Photo from Malik

After two years, in 2010, Photoshop released CS5. It added the Puppet Warp Tool, Bristle tips, Mixer Brush and Automatic Lens correction. Masking was improved further.

History-of-Photoshop-16

Photo from Misaki

At last, on May 7, 2012, CS6 came out with a very new and darker UI. It included newer features like autosaving, patch and move tools, blur gallery and vector shapes with dotted or dashed strokes.

History-of-Photoshop-17

Creative Cloud

As you are reading this article, Adobe is already on the process of refining the software. One of the major innovations we have had is the Creative Cloud series. This is a service from the Adobe Systems which gives users access to the company’s design software.

CC works on a software as service model where users can ‘rent’ the usage of the suite for a charge. This tries to eliminate piracy while minimizing the expenditure of companies with their design software.

History-of-Photoshop-18

Photo by Jeff Myer

Photoshop’s CC version includes various changes. With CC, you are granted with more liberty, speed and make images ‘incredibly real’. You can work straight with Behance and get feedback with your projects instantly. This newest installment of Photoshop uses features like Smart Sharpen, which turns low-res images to high-res. It also allows Camera Shake Reductions which allow the users to restore sharpness in motion-blurred shots.

Conclusion

Looking back into Photoshop, we will see how a simple idea can evolve into a useful and impacting tool. Without the Knoll’s display, we would not have our favorite software, right? This just proves that Photoshop, like us web designers, can evolve and be better. We continue to remove our bugs, improve our tools (and sometimes redesign our UI) to become better people. And, hopefully, like Photoshop, we will emerge as successful web designers.

Editorial Team

Written by Editorial Team

26 Comments

  1. Thanks for that you share this great plugins whit us, you are the best.

    Reply

  2. I’ve collected some plugins, it’s all about productivity. Thanks for share.

    Reply

  3. Script Bay! – Free
    I’d die without it to manage my massive PS scripts collection.

    TypeDNA – Best font manager and browser and downloader all inside PS. -Not free :( but they do give a decent trial and discounts to students.

    Filter Forge – FF is costly but man it’s awesome.

    Path Styler Pro – Only runs on x86 Ps but it’s well worth it, but you can multi-client PS CS6 and CC for sure with sandboxie which is very useful when needing to run 32 & 64 at the same time. Not sure about CS5 or less never tried, but I’m guessing it would do the same no problem. Free as well.

    Reply

  4. Good Collection! It is very useful for Designer!

    Reply

  5. Some great plugins listed here. As a photographer, some of these are not relevant to my day-to-day work, but they certainly warrant playing around with in my down time and when just messing around in photoshop.

    Reply

  6. Hello Rudolph Musngi
    I recently started learning Adobe Photoshop from an institute and i am glad that i am getting precious knowledge here without any charge.Thanxx for this helpful article.I leart a lot from your website.

    Reply

  7. #6, did you mean to say “cum software”?

    Reply

    1. Rean John Uehara September 26, 2013 at 23:09

      I see nothing wrong here. :)

      Reply

  8. Wow there were a lot of plugins in here I haven’t heard of. I find one plugin that I use over and over again is png to ico. It’s for making favicons and is free. It integrates perfectly with Photoshop. Nice article by the by.

    Reply

  9. Some of these plugins are better than what Adobe put in Photoshop CC. Although, that is not really surprising given Adobe’s track record.

    Reply

  10. Thanks for sharing the list of plugins, I have been using CSSHat for a few months and I love it. Will have to give a couple of your recommendations a try.

    Reply

  11. Jose Alejandro Realza September 12, 2013 at 22:48

    Excelent Collection!

    Reply

  12. Hello, congratulations for the good news, I hope that people have more attention distracted for this post. Best regards Michelangelo ;-)

    Reply

  13. Awesomecakes! CS6 is like the gift that keeps on giving. Thanks for compiling this list.

    Reply

  14. Some great plugins here Photoshop is the number one tool for designers!

    Reply

  15. Photoshop is great.. i so much love it… Thanks a lot for sharing its plugins collection..thanks

    Reply

  16. Yes, you are right Photoshop is one of the best platform for web designer. You have shared the best collection of plugins. I like it.
    Thanks for sharing such a great resources.

    Reply

  17. Wow this is an amazing list of Photoshop plugins. You’ve just saved me a whole lot of time.

    Reply

  18. Very nice list of plugins

    Reply

    1. Thanks!

      Reply

  19. Great PS plugins Rudolph, thank you for sharing that article! Divine Elemente seems to be a really helpful plugin.

    Reply

    1. It is very helpful indeed, when mastered! :)

      Reply

  20. Serial no. 20 is what I was looking for. Thank you.

    Reply

  21. Ganesh Narayan Gupta September 10, 2013 at 10:40

    Hello Rudolph,

    This is a great list of plugins for using along with photoshop. I was unaware of any plugins to use with photoshop for making it better. Now, these tools will be very helpful to me as it seems. Thanks for sharing :-)

    Reply

    1. No worries. Good luck. Use the tools well!

      Reply

  22. Great list! A small typo in 6 (Photoshop plug-in cum software)

    Reply

Leave a Reply