Photoshop Cc 2015 Building Website Designs In Photoshop

Learn how to design a professional quality website in Photoshop CC.

Last updated 2022-01-10 | 4.2

- Take on paid commercial web design projects.
- Design professional web design mockups using Photoshop.
- Create web designs for mobile
- tablets and desktop.

What you'll learn

Take on paid commercial web design projects.
Design professional web design mockups using Photoshop.
Create web designs for mobile
tablets and desktop.
Present your concepts on actual mobile devices.
Supply files to a web developer.

* Requirements

* No previous experience in Photoshop is necessary.
* You will need a copy of Photoshop CC 2015 installed. Free trials can be downloads from Adobe

Description

Hi - my name is Dan and I’ll be leading you through this course on how to Build Professional Website Mockups using Photoshop. This course is for people serious about making money building professional website mockups using Photoshop.

These are the skills employers want. UI/UX design skills are where the high paying jobs are at. 


I built this course for beginners. For the people nervous about changing their careers into web design - as well as for developers who lack any design skills. No experience in Photoshop or web design is necessary before taking this class.

During the course we’ll create this website for a mock creative agency - creating mobile and desktop versions. 

With exercise files you can download and work along with me. While we’ll start right at the basics we’ll move quickly into the professional tricks of the trade.

This course is a mixture of head and shoulders style presentations and HD screen captures. The course also includes printable notes as well as quizzes to help retain what you have learnt.


I’ll be teaching you how to setup your new documents. How to work with mobile, tablet and desktop views. You’ll be able to easily pick web safe colours and fonts for your website and preview them on your iPhone or iPad. You’ll learn how to crop images and make full backgrounds all the way through to exporting all the right files for your website. Know that I’ll be around to help - when you’re ready you can send me your work and I’ll see if they are any suggestions I can offer.


If you’ve ever wondered how to design a website in Photoshop than this is the course for you.

Now it’s time to upgrade your skills, get that better job and impress your clients. 


Who this course is for:

  • This course is for people who want to start earning money as a web designer.
  • This course is for beginners wanting to learn to use Photoshop for web design.
  • This course is not intended for people wanting to learn Photoshop for graphic design or photography uses.

Course content

17 sections • 65 lectures

Introduction Preview 01:43

What do we need to deliver at the end of our project? Preview 00:49

This lecture we'll discuss what your final deliverables are. What files need to be made. What code needs to be created and supplied to a web developer.

What is Photoshop’s role when designing a website Preview 00:55

Photoshop is amazing at many things. In terms of designing websites it’s the most commonly used tool and if you’re looking for employment in the web design world it’s essential. So Photoshop can do so much in the planning and concept stage. As far as a completed website (online and taking orders) Photoshop can do very little. Once you’ve had your Photoshop mockup signed of and agreed to. You hand over the images and styles you’ve created and either you or your web developer needs to start build the site in HTML & CSS.

What are the production videos? Preview 00:24

These sessions are where I’m busy building our concept site using the tools we’ve learnt.

What are we making in Photoshop?

Getting your workspace ready for UI work Preview 00:45

This video will ensure you have Photoshop ready before your web designing work can begin.

Adjusting the Photoshop preferences Preview 02:04

By default Photoshop is setup for graphic design and photography work. After this video you'll have all the correct preferences for designing web sites.

Download the exercise files Preview 00:45

Download all the exercise files, templates and links for this course: https://www.dropbox.com/s/wg002rsk8l9muy2/PS%20Web%20-%20Exercise%20Files.zip?dl=0

A good web designer is alway prepared.

This quiz will test if you remember the main points about getting Photoshop ready for professional web design.

Understanding responsive mobile & tablet design Preview 01:44

After this lecture you'll know what responsive design is and how it impacts your Photoshop design work.

Understanding grid systems & BootStrap Preview 06:28

After this video you'll know how to use a grid system to design your web sites.

Know my grids.

Grids are super important in web design - it's useful to know who the big players are.

Tips for zooming & navigating your document Preview 02:02

You'll be able to move around your web design project quickly and professionally.

Measuring & spacing tools Preview 03:53

You will be able to measure the distance between objects on your page for accurate web design development.

Layer shortcuts you need to know Preview 02:48

After this lecture you'll be a master of the layers panel. Switching layers and moving each layer around the document effortlessly.

The eye dropper tool Preview 01:28

After this lecture you'll know how to choose and reuse colors accurately throughout your web site design.

The transform tool Preview 01:40

After this lecture you will be able to resize objects, type and buttons quickly.

The ‘f’ key Preview 01:34

You'll know how to display your web design concepts in presentation mode in Photoshop.

Name that web design tool

Fun for all the family.

Testing on iPhone & iPad using Adobe Device Preview Preview 05:46

After this lecture you'll be able to preview your Photoshop web design mockups on your iPhone or iPad using the Adobe Device Preview app. You'll be able to preview and impress your concepts to colleagues and clients on the device!

What is technically possible in web design Preview 03:05

After this lecture you'll know what you can and can't do in your Photoshop web design mockups. You'll know how to save time and pain when it comes to the actual web development of your page.

Screen sizes for desktop, tablet & mobile Preview 01:51

After this lecture you'll know what size your pages should be when designing for different devices like iPhone's, iPads and laptop screens.

Testing, testing... 1, 2, 3

Using art boards Preview 03:48

After this lecture you'll know how to use art boards to create your desktop, tablet and mobile views of your website.

What about page heights? Preview 01:18

On completing this lecture you'll know what heights your mobile & desktop pages need to be in Photoshop.

Page guides, columns & rulers Preview 02:14

After this lecture you'll know how to set page guides & columns using your rulers.

How important are your page heights?

Picking website colors Preview 03:42

After this lecture you'll be able to pick colors for your website using Adobe Color.

Know what colors to use.

Adding structure to your site with the vector shapes Preview 04:04

After this lecture you'll know how to create your navigation, body boxes and footer boxes for your website.

Production video - adding structure to your web design Preview 03:12

Adding structure

Expanding & fixed width text boxes in Photoshop Preview 03:12

After this lecture you'll know when to use fixed and expanding text boxes in your Photoshop web design concepts.

How to design using web safe fonts via Google Fonts Preview 04:07

After this lecture you'll be the boss of web fonts!

Place holder text with Lorem Ipsum Preview 01:23

After this lecture you'll know how to hold the place of text if the copy hasn't been created yet.

Production video - adding all of our text Preview 06:16

It all looks Latin to me.

Understanding lorem ipsum.

Adjusting your page edges Preview 01:28

After this lecture you'll know how to adjust the sides of your Photoshop pages to accommodate your web design.

Page adjustment

Where to get commercial use free images Preview 02:10

After this lecture you'll know the best places to find and download free images that you can use in professional and commercial projects.

Embedding or linking your images? Preview 02:12

After this lecture you'll know the pro's and con's of embedding and linking your images in your web design mockup.

How to mask your images using a clipping mask Preview 03:04

On completing this lecture you'll know how to mask your web images using the professional Photoshop technique called 'clipping masks'.

Masking images for rounded corners & circles Preview 02:52

On completing this lecture you will extend your knowledge of clipping masks to use rounded corner rectangles and circles.

How to create large background images Preview 05:00

After this lecture you'll be able to build slick background images and graphics. You'll know the techniques needed for blurring, knocking back and making full screen background images.

Production video - adding our images Preview 09:24

This production video is about putting in all of our images to complete our website design in Photoshop.

Images

Where to get commercial use, free icons for your Photoshop website design. Preview 05:03

On completing this lecture you will know the best places to get free icons for your website design. These icons are able to be used in your professional work free of charge.

Production video - adding our icons Preview 02:29

This production video is about putting in all of our icon to complete our website design in Photoshop.

Coloring your website icons

How to tidy up with layer grouping Preview 04:34

Layers can get very messy with large projects like web design concepts. At the end of this lecture you'll have a file ready that even the pickiest web developer will admire.

Find what you need quickly with layer search Preview 01:28

After watching this lecture you'll be the quickest web designer on the block. Being able to find, sort and change your web design elements with the speed of a website veteran.

Naming your layers like a pro Preview 01:11

Most people take the long way to name their layers. Not you. After this lecture you'll know the secret to speedy layer naming in Photoshop.

Become a Photoshop layer professional

Designing a form for your website design Preview 04:12

Forms are an integral part of any website design. After watching this video you'll know the tricks to mocking up your own web form.

How to create a footer for your website Preview 01:17

After this lecture you'll see how easy creating a website footer is.

Production video - finishing up our desktop view Preview 01:19

This is a big one. We'll be putting the finishing touches on the desktop view of our website. Next step... mobile!

Forms in Photoshop

Designing your mobile website view Preview 07:56

After completing this lecture you'll know how to take your desktop design and translate it into a mobile phone ready version.

Production video - completing our mobile view Preview 16:46

Using our professional skills we'll work through the process of fully converting our website for mobile display.

Mobile, Tablet or Desktop first?

Exporting your web images Preview 08:43

This lecture could be the most important of the entire series. This is where the game is won. At the end of the lecture you'll know how to expertly produce the perfect images ready for website design.

Exporting CSS from Photoshop Preview 02:47

After completing this lecture you'll know what style details (CSS) can be extracted from your Photoshop website design. You'll be able to extract and deliver beautiful CSS that will make any web developer jump for joy.

Using Adobe Generate to make image export amazing Preview 04:49

Not all image exporting is created equal. After this lecture you'll be able to turn the process of creating web ready images into an art. This technique will be the envy of your colleagues.

Web image types

I don’t want this to be over. What next Dan? Preview 00:50

Don't worry, it's not over. This lecture will give you the methods to reach out to Dan and share your projects.