speech mark


FacebookBYOL TwitterGoogle PlusLinkedinPintrestYouTube
Adobe Certified Instructor

Photoshop CC logo Top 15 Photoshop resources for web design

Curated by us for the Photoshop & web design community.







* List created in October 2014 by Emma Norton. Emma is a Photoshop trainer here at BYOL.


#1 - Create a One-Page Retro Web Design Layout in Photoshop

This mini Photoshop tutorial explains the process of creating a one-page web design layout in a clear and easy manner.  However it also uses Illustrator to initially create various shapes and elements. If you don’t have illustrator you could download a trial from Creative Cloud and Google this process. 

I like how they use shortcuts in their tutorial. This just helps add to your knowledge if you don’t know some of these shortcuts already and makes for a much faster process. I recommend always trying to get to know the shortcuts if you’ll be in a programme often, particularly like Photoshop. Shortcuts are the kind of thing you’ll learn from Photoshop courses or web design courses but as you can see this is a course in itself and an easy go to tutorial!

3 star rating



save for web




#2 - Mastering Photoshop: Noise, Textures & Gradients

This website will help you take your good design into great design! It offers you many processes to create subtle textures for your website. And as they say “a vast array of tools for embellishing a design”. 

If you’ve attended any Photoshop course you’ll know a bit of Photoshop jargon which would be useful here as they don’t use an exact step-by-step method but do take you through the processes assuming you know your way round Photoshop already.

Some of the techniques ‘inner glow layer style’ for example just add more depth to your website not something you would necessarily learn on a web design course so this is a great go to website for a few extra design tips.

3 star rating



noise in photoshop




#3 - Create an Instagram Widget in Adobe Photoshop

Wanting to create an Instagram Widget for your website? Well this site gives you a 30 minute Photoshop course in how to create one! It’s at a beginner level so you don’t even need to be a whiz in Photoshop. They have provided you a really easy user friendly step-by-step process with screenshots to help you on your way.  I like how they still use the technical terms yet make it easy to understand and each step isn’t too full on.

Adding a widget that links your Instragram imagery can be a great addition to your website. One, it gives it a bit of point of different and two, linking up your social media so they all work together is a given these days and three, you are helping direct traffic around your web presence. And it all just adds extra depth to your website and giving you a polished web design for your site!

Lastly it’s great they mention to not break any copyright rules. This often can be over looked but it’s important to make sure you’re on the right track with this. Know where your images come from, credit them or take them yourself.

3 star rating



Instagram widget in Photoshop




#4 - How to Create a Web Page Size in Photoshop

Definitely a web page to bookmark! This website will help if you’re creating mock-ups or websites using Photoshop. Following this process will help you create accurate looking visuals in the correct size. Why wouldn’t you want to work in ‘actual size’?

Their process is overall easy and they explain in good detail but I’ve come to like a step-by-step process. Personally I work better with a bit of information at a time especially when I’m not used to a programme like Photoshop for example. When it’s long ‘to do’ paragraphs I find myself reading it about 3 times. Good learning I suppose!

They offer great advise if you are working with ultra-high-resolution screens mentioning you’ll need more than one set of imagery for your site. So thumbs up to their ‘Other Considerations’ section!

4 star rating



Web page sizes




#5 - Photoshop Gradient Sets For Web Designers

Add this page to your bookmarks!  If you’re always in the need of a gradient then this is the place to visit! Offering you an array of Photoshop gradient sets to download. Yes of course you could spend the time in Photoshop doing this yourself but when you see a nice gold gradient you’ll use it.... Why wouldn’t you?!? 

Definitely a website you’ll keep returning too if gradients are your thing. Take a moment to look at a few websites... You’ll likely find that gradients are very common on a web page but perhaps rather subtle. Look at the navigation panel.... Light charcoal to a deep right charcoal perhaps? Doesn’t that look so much better than a flat grey? Using a gradient helps add realism and depth to your page making for a much more exciting site.

5 star rating



Photoshop Gradients




#6 - The Mysterious “Save For Web” Color Shift

Ever wondered if you could use just the ‘save as’ option and save your imagery in Photoshop as a jpg or png OR if you should be using the ‘save for web’ option? Well this website kindly helps you understand why the ‘save for web’ option is beneficial to great imagery for your website. 

They cover all the need to know aspects.... IE colour testing and they give you warnings about how colour can display on differently on screens and how to create colour perfection. 

4 Stars



proof setup




#7 - Clean White Navigation Bar

“Simplicity is the key to beautiful web layouts. Learn how to draw a beautiful navigation bar in Photoshop.” What a great way to start this blog page! And ain’t that the truth.

Definitely and easy step-by-step process but I’d say your Photoshop knowledge would need to be more to an intermediate level.

3 star rating



white nav in Photoshop




#8 - Quick Tip – Accurate Web Colors in Photoshop

Important ‘must know’ advice is offered here with a quick tip in creating accurate web colours in Photoshop. They speak ‘Photoshop’ so you need to be somewhat fluent in the Photoshop language IE they mention ‘slicing’ so you might need to do a bit of Googling if you are unsure of some terminology or perhaps you’ve attended a Photoshop course already and know a thing or two. 

You’re given a mini debrief in the difference of colours that you can work with in Photoshop along side web which is great to help your understanding if things have been going wrong for you and your images or colour choices look different when your website is live. 

3 star rating



red variations




#9 - How to create a web badge in Photoshop

This really easy Photoshop tutorial gives you a great step-by-step process to create a web page badge or icon. You might need something like this to draw the eye to your call to action or sale item perhaps.

You can obviously find pre-existing icons on stock image websites but to know how to create a unique one for your own website just adds the x factor to your site. If you are on the web a lot you’ll start to see the same icons have been purchased so to create something yourself definitely is an advantage. 

This site not only gives you the steps but also nice large images to help you building your icon. Bookmark this site!

4 star rating



how to make a web badge in Photoshop




#10 - Photoshop Etiquette

You may not have a tidy desk BUT your Photoshop image files are tidy, clearly named and ordered right....?

If you are familiar with Web design already you’ll know the important so being tidy with your files, this brings us to Photoshop etiquette! You need to be top knotch with your file organisation and this website helps you tick the boxes with what you need to cover to do so.

It also looks at layers in Photoshop. It covers some simple factors; name your layers for example but we all know when we’re busy this is the first process to go. It’s super important to keep naming files, folders, layers etc. You’ll thank yourself later!

5 star rating



noise in photoshop




#11 - Responsive Web Design In Photoshop - A Mindset Not Just Technique

This you tube 10 minute video is a clear and easy to follow (and listen to) video in creating responsive web design in Photoshop. It gives you recommendations for getting started like using a grid system to help you create responsive design. Here ‘unsemantic’ is used as the example https://unsemantic.com/ but they mention a few grid ‘help’ websites to try as well. Whatever you use this tutorial helps if you create a grid structure so when your web page is viewed on an iphone, laptop or computer your site will accommodate to suit!

Your Photoshop skill I think needs to be intermediate to understand the terminology. 

4 star rating



Responsive web design in photoshop CC




#12 - The 25 best Photoshop tools for web designers

This website has done the hard work for you. They have found you 25 great Photoshop plug-ins that could be useful to your web design or work-flow! These plugins can give you a whole new Photoshop experience. They give you the opportunity to expand your font and colour possibilities. A few examples of the plugins they link you to is ‘Cut&Slice Me’ - a plug-in making it much easier to cut and slice up your Photoshop layouts as well as cutting for different devices. Another is ‘Layer Style Jailbreak’ a Photoshop tutorial showing further manipulation IE taking a drop shadow from being flat to a page curl shadow just adding a bit more depth!

5 star rating


photoshop tool for web designers




#13 - Coolorus

Coolorus is a Colour Wheel Panel for Photoshop (NB this is compatible with Photoshop CS5 but not yet Photoshop CC 2014). Coolorus will help you get accurate colours so what you are working with in Photoshop will be what you see on your website! Sounds simple and straight forward..... But you may realise why such a website like Coolourus is useful.

3 star rating







#14 - Photoshop: Spring Cleaning

If you’re used to having extension panels in your version of Photoshop to help give your web design the x factor keep note of this website as Photoshop.com Blog is keeps you up to date with that’s happening! As you may know the new release of Photoshop CC 2014 isn’t using Flash but rather HTML5 which means now some plugins wont work. Thankfully Photoshop.com Blog tells you, they give you the lowdown on what’s happening and why.

3 star rating



Photoshop Blog




#15 - Convert your Photos to Stunning Black and White Versions

If you have a stunning coloured photo but need a stunning black and white WOW image for the opening of your website then this Photoshop tutorial is the one for you! Rather than just convert to black and white Photoshopstar takes you through the stages to create an image with strong black, greys and whites. You are shown several in fact so suit your style of image. Definitely worth knowing you have a few options so you can work out what suits. Who needs to attend a Photoshop course when you have websites like this at your finger tips!

5 star rating



Black and white sliders in Photoshop




If you’ve got any questions please use the comments section below or hit me up on Twitter/Google+/Facebook.


comments powered by Disqus







Photoshop courses in Sydney





speech mark

“I promise you will leave us with the confidence to apply your new skills effectively in the real world.”

    - Daniel Walter Scott

    - Training Manager & Courseware Author