Designing A Website in Photoshop, Illustrator (& GIMP)
3.6 (47 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.
1,020 students enrolled
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!
3.6 (47 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.
1,020 students enrolled
Created by Rob Cubbon
Last updated 3/2014
English
Current price: $10 Original price: $80 Discount: 88% off
5 hours left at this price!
30-Day Money-Back Guarantee
Includes:
  • 2 hours on-demand video
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
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
Requirements
  • Photoshop (or GIMP)
  • Illustrator (or GIMP)
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.

Who is the target audience?
  • Web designers
  • Web developers
Compare to Other Web Design Courses
Curriculum For This Course
16 Lectures
01:55:39
+
Introduction
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
05:56

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 http://robcubbon.com/logocourse

Working on the logo in Adobe Illustrator – Part Two
06:16
+
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
13:12

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
04:34

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

Designing the sidebar and footer in Photoshop
07:46

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
06:34
+
Client feedback
1 Lecture 06:12

Client feedback on the first visual.

Client feedback on the first web design visual
06:12
+
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
08:19

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
07:45
+
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
06:59

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
07:27

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
09:39
+
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
09:07
+
Conclusion
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. http://robcubbon.com/free

Conclusion
04:18
About the Instructor
Rob Cubbon
4.4 Average rating
1,126 Reviews
29,780 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.