Buying for a Team? Gift This Course
Wishlisted Wishlist

Please confirm that you want to add Designing A Website in Photoshop, Illustrator (& GIMP) to your Wishlist.

Add to Wishlist

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 (40 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.
951 students enrolled
Created by Rob Cubbon
Last updated 3/2014
$10 $80 88% off
4 days left at this price!
30-Day Money-Back Guarantee
  • 2 hours on-demand video
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Have a coupon?

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.

Who is the target audience?
  • Web designers
  • Web developers
Students Who Viewed This Course Also Viewed
What Will I Learn?
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
View Curriculum
  • Photoshop (or GIMP)
  • Illustrator (or GIMP)
Curriculum For This Course
Expand All 16 Lectures Collapse All 16 Lectures 01:55:39
1 Lecture 02:08

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

Preview 02:08
Working on the logo
2 Lectures 12:12

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

Working on the logo in Adobe Illustrator – Part One

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

Working on the logo in Adobe Illustrator – Part Two
The first design visual
5 Lectures 41:33

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.

Preview 09:27

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.

Designing the header and top navigation bar

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.

Designing the heading, main image and body text in Photoshop

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

Designing the sidebar and footer in Photoshop

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

Final tweaks of the first design visual in Photoshop and GIMP
Client feedback
1 Lecture 06:12

Client feedback on the first visual.

Client feedback on the first web design visual
Actioning the client's feedback
2 Lectures 16:04

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

Actioning the client's feedback in Photoshop and Illustrator – Part One

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

Actioning the client's feedback in Photoshop – Part Two
Presenting the visuals to the client
3 Lectures 24:05

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.

How to present a visual of the website design to the client in a browser window

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.

Showing how the website responds to a tablet in Photoshop

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.

Showing how the website responds to a smartphone in Photoshop
Bonus video!
1 Lecture 09:07

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

More tips on designing web pages in Photoshop
1 Lecture 04:18

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.

About the Instructor
4.4 Average rating
1,022 Reviews
41,987 Students
15 Courses
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.

Report Abuse