Designing A Website in Photoshop, Illustrator (& GIMP) | Rob Cubbon | Skillshare

Designing A Website in Photoshop, Illustrator (& GIMP)

Rob Cubbon, An entrepreneur who wants to help you

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
16 Lessons (1h 56m)
    • 1. Introduction

      2:08
    • 2. Designing the Logo in Adobe Illustrator – Part One

      5:56
    • 3. Designing the Logo in Adobe Illustrator – Part Two

      6:16
    • 4. Starting the Design in Photoshop and Gimp

      9:27
    • 5. Designing the Header and Top Navigation Bar

      13:12
    • 6. Designing the Heading, Main Image and Body Text in Photoshop

      4:33
    • 7. Designing the Sidebar and Footer in Photoshop

      7:46
    • 8. Final Tweaks of the First Design Visual in Photoshop and Gimp

      6:33
    • 9. Client Feedback on the First Web Design Visual

      6:12
    • 10. Actioning the Client's Feedback in Photoshop and Illustrator – Part One

      8:19
    • 11. Actioning the Client's Feedback in Photoshop and Illustrator – Part Two

      7:45
    • 12. How to Present a Visual of the Website Design to the Client in a Browser Window

      nn-5.jpg
      6:59
    • 13. Showing How the Website Responds to a Tablet in Photoshop

      iPad-Mini website view.psd
      7:27
    • 14. Showing How the Website Responds to a Smartphone in Photoshop

      iphone website view.psd
      9:39
    • 15. More Tips on Designing Web Pages in Photoshop

      9:07
    • 16. Conclusion

      4:18

Project Description

Designing A Website in Photoshop, Illustrator (& GIMP)

The project for this course is to design in Photoshop (and Illustrator and GIMP) a visual look and feel for a new website. By the end of this course you will be able to show a client a website design in desktop, tablet and mobile versions. 

You will learn loads of 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

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

Student Projects