Designing A Website in Photoshop, Illustrator (& GIMP)

Show a visual representation of a website to a client first. Make the development process easy!
4.3 (39 ratings)
Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
945 students enrolled
Instructed by Rob Cubbon Design / Web Design
81% off
Take This Course
  • Lectures 16
  • Length 2 hours
  • Skill Level Intermediate Level
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works


Find online courses made by experts from around the world.


Take your courses with you and learn anywhere, anytime.


Learn and practice real-world skills and achieve your goals.

About This Course

Published 3/2014 English

Course Description

In this course I will show you how to design a pixel-perfect, beautiful website design using the Adobe photo editing (Photoshop) and vector editing (Illustrator) applications – I will also show you how to do most of the same with the free tool GIMP.

This course would be extremely useful for graphic designers and web designers who want to show their clients exactly what they'll get before they start developing the website

By creating and amending any web page to look exactly the way the client wants, you can start charging in excess of $3000 and much more for every website you produce

Because clients will pay extra for the custom feel that you will give their websites

Are you worried that you won't be able to deliver on the development of this website afterwards? Well, don't worry!

Because I will show you the tricks to change beautiful WordPress themes (we use the Genesis sample child theme) in a browser using Developer Tools that will be then be easy to develop after client has passed the design.

You will also learn loads of extra tricks in Photoshop, Illustrator and GIMP:

  • I will teach you how to keep the Photoshop layers and elements in order and label them correctly
  • I will teach you how to group layers to further organise your layers in the layer palette
  • I will teach you how to use vectors (live text, shape layers and vector smart object) where ever possible – as resizing them won't lose you any quality or resolution
  • I will teach you how to use vector smart objects because they won't lose you any quality after resizing either and you have the added advantage of editing one and all the others changing accordingly
  • I will teach you how to select multiple layers in the layer palette
  • And I will teach you how, with multiple layers selected with the Move tool (V), you can distribute and align the objects by using the buttons in the option bar at the top

And by the time the course is finished you will be able to work up an exact visual replica of any website, mobile app, tablet app or any sort of digital interface that you care to imagine

Join me on my new course Designing a Website using Photoshop, Illustrator and GIMP.

My name is Rob and I have been running a design business since 2006. If you have any questions, please get in touch.

What are the requirements?

  • Photoshop (or GIMP)
  • Illustrator (or GIMP)

What am I going to get from this course?

  • Create a complete visual layout of any page of a WordPress website to the satisfaction of a client
  • Learn how to use Developer Tools in a browser to manipulate an existing WordPress theme so that the client has a custom look
  • Create the visual layout of a website on a mobile, tablet or on any other device to the satisfaction of the client

Who is the target audience?

  • Web designers
  • Web developers

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.


Section 1: Introduction

Welcome! This video introduces you to some, but not all, of the concepts of the course.

Section 2: Working on the logo

How to create a logo and choose a font for your logo.


More about creating a logo in Illustrator. If you want a reduction on Tara Roskell's excellent course "How to design a logo a beginners course" please click this link

Section 3: The first design visual

In this lecture I show you how to base your design on a pre-existing theme or templates. In this case I choose the Genesis sample child theme by Studiopress – an excellent theme framework for WordPress.


This lecture shows you how to design the website's header and top navigation bar. So, we learn about fonts, text in Photoshop, shape layers in Photoshop and arranging objects in Photoshop.


This lecture shows you how to design the website's main heading, main image and body text. We also learn about making changes in browsers' Developer Tools, taking screenshots and pasting them into the Photoshop document.


This lecture shows you how to design the website's sidebar and footer.


This lecture show the final tweaks to the Photoshop document that we are preparing for the client's website design.

Section 4: Client feedback

Client feedback on the first visual.

Section 5: Actioning the client's feedback

Here we begin to edit the original Photoshop document in light of the feedback that we received from the client.


Here we continue to edit the original Photoshop document in light of the feedback that we received from the client.

Section 6: Presenting the visuals to the client

Please feel free to download the supplementary material !!! This video explains how to display of visual image of the website within a browser window properly so that the client gets a good idea of how the website will look.


It's always a good idea to keep in mind the responsivity of your website from the beginning right through to the end of the design and development process.

Clients really love it if you can show them an image of what their website may look like on a tablet.


This lecture shows you how to mock up a smartphone view of your website design so that the client can get an idea of what the website will look like on mobile devices.

Section 7: Bonus video!

More about Photoshop, layer groups, duplicating layers and vector smart objects.

Section 8: Conclusion

This is the conclusion to the course. Thank you very much. Please join my mailing list for some more excellent, free design and marketing tips plus exclusive discounts and special offers.

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Rob Cubbon, Bestselling author, entrepreneur, web and graphic designer

I have over 15 years experience in graphic design, web design and marketing. I have run my own business since 2005.

I am an Amazon bestselling author of seven books, bestselling Udemy instructor and all-round good guy who wants success for you and your business.

Being your own boss is an incredibly liberating experience but it can be difficult as well. There never seems to be enough time for what we want to do.

I'm driven to help people experience the positive side of entrepreneurship, not the negative.

I also build brands, create websites and run marketing campaigns for my clients.

My mission statement: I want to help and inspire people to build sustainable online businesses, earn passive income and experience greater freedom and happiness in their lives.

Ready to start learning?
Take This Course