A collection of Photoshop Resources that can help with your website design

Have you always admired or envied the bold and beautiful designs of some websites? It will interest you to know you too can create splendid web

designs with your Photoshop. Yes, photographers or Instagramers no longer have the monopoly on Photoshop, web designers are now utilizing it to create unforgettable web layouts, graphics, and interface.

Photoshop is a graphic and image editing application, however most people use it for image ‘manipulation’. Photoshop has been around for over twenty years now, and in that time has gained world-wide popularity, mostly among those working with images. The application, for now, is usable only on a Personal Computer, as its mobile version for android and iOS failed.

There are a million and one Photoshop resources out there to help with your web design, most free, most paid. Here is a one-stop-shop collection of Photoshop resources that can help you design a WOW website.

From Beginner to Expert

These resources offer tutorials and take a beginner on a step by step journey to becoming a Photoshop Expert.

When you have questions about a creation, who best to ask? Non other than the creator of course  Adobe has lots of resources related to its creation, this should be your first port of call.

While plans are still at the drawing stage, you can still interact with your audience and start making your mailing list by designing a ‘coming soon’ web page. PSD has a tutorial to teach you how to do just that.

Envato Tuts+ has an easy to understand tutorial that teaches you how to design a website from scratch with Photoshop.

Wegraphics has detailed step by step tutorial on creating a .PSD file and converting to HTML. The tutorial takes you from the drawing board to the landing board.

Looking for specialized tutorials for your website’s niche? Check out Enavo Tuts+ for how to design websites dedicated to mobile applications. Mahmoud Deiab also from Enavo Tuts+ teaches how to design websites for online shopping. Photoshop Plus+ offers free tutorials on creating cool website for photographic themes, Photoshop Plus+ also has tutorials on designing websites for online magazines. And the sport lovers can learn from Wegraphics.

Scouting for extra creativity? Six Revisions has just what you want, this tutorial will take you step by step to creating a watercolor based interface for your web design. We applied those techniques when we wanted to make these bow quiver images stand out.

After gliding through these beginner’s hallway, you can help yourself further with these wonderful tutorials posted by Suzanne Sacca on Elegant Themes. She especially covered the two new features of Photoshop’s latest update (CC 2015.5) face-aware liquify and content-aware crop. Other expert tutorials she mentioned covers, bokeh effect, dispersion effect,  motion photo effect, comic bookify, double exposure, day into night, photorealistic icons, dramatic shadows, and text+background merge.



The reason they say we learn from our mistakes is because the previously much needed wisdom suddenly materializes during post-mistake reflections. I’m sure you would like to know tips that would save you from ‘Photoshop disasters’ when designing your website.

David  Every and Dan Rose, of Creative Bloq share fifteen nuggets of wisdom they have acquired over time while designing a website with Photoshop.

An online magazine Smashing offers some tips which it calls etiquette that are necessary for a web designer using Photoshop, while these tips aren’t mandatory, they help in ensuring tidy and orderly work.



Photoshop files have a file extension known as .PSD (Photoshop Document), there is also another file extension that has more storage called .PSB (Photoshop Big). So any web design template created with Photoshop is usually saved as a .PSD file, for easy sharing locally or in cloud. A template created by one can be used by another.

Graphic fuel has a bundle of twenty already designed website templates for small business. With a small fee, you can download these ready to use templates.

Every month best psd freebies gives away bundles of templates for free.

FreePsd and PSD Freebies is another site that offers ready to use templates for mostly web designers and graphic designers.



These are adds-on that increase the functionality of Photoshop and further enhance great web designs. Informations on Adobe Photoshop plugins can be found here. Smashing Magazine offers a wide range of resources for plugins and filter.

All these resources have been checked out and verified, it is hoped you will use them as a one stop shop for all your needs when using Photoshop for your web design