When you enroll through our links, we may earn a small commission—at no extra cost to you. This helps keep our platform free and inspires us to add more value.
How to Design a Website in Photoshop
Unlock creativity with Skillshare! Learn acrylic painting, AI writing, graphic design, and photography.
This Course Includes
skillshare
0 (0 reviews )
2 hours 43 mintues 
english
Online - Self Paced
course
SkillShare
About How to Design a Website in Photoshop
Intro
What do we need to deliver at the end of our project
What is Photoshop's role when designing a website
What are the production videos
Getting your workspace ready for UI work
Adjusting the Photoshop preferences
Download the exercise files
Understanding responsive mobile & tablet design
Understanding grid systems & Bootstrap
Tips for zooming & navigating your document
Measuring & spacing tools
Layer shortcuts you need to know
The eye dropper tool
The transform tool
The 'f' key
Screen sizes for desktop, tablet & mobile
Testing on iPhone & iPad using Adobe Device Preview
What is technically possible in web design
Using art boards
What about page heights
Page guides, columns & rulers
Picking website colors
Adding structure to your site with the vector shapes
Production video - adding structure to your web design
Expanding & fixed width text boxes in Photoshop
How to design using web safe fonts via Google fonts
Place holder text with Lorem Ipsum
Production video - adding all of our text
Adjusting your page edges
Where to get commercial use free images
Embedding or linking your images?
How to mask your image using a clipping mask
Masking images for rounded corners & circles
How to create large background images
Production video - adding our images
Where to get commercial use, free icons for your Photoshop web design
Production video - adding our icons
How to tidy up with layer grouping
Find what you need quickly with layer search
Naming your layers like a pro
Designing a form for your website
How to create a footer for your website
Production video - finishing up our desktop
Designing your mobile website view
Production video - completing our mobile view
Exporting your web images
Exporting CSS from photoshop
Using Adobe Generate to make image export amazing
I don't want this to be over. What next, Dan?
What You Will Learn?
- Hi - my name is Dan and I’ll be leading you through this course on how to Build Professional Website Mockups using Photoshop..
- These are the skills employers want. And 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. For people new to the web world - as well as for developers who lack any design skills..
- We cover everything you need to design your first web mock ups without getting too technical. During the course we’ll create this website for a mock creative agency - creativing mobile and desktop versions. .
- With exercise files you can download and work along with me. I also have printable notes so you can follow along and scribble your own personal notes. .
- 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. .
- Now it’s time to upgrade your skills, get that better job and impress your clients..
- Download the exercise files here..
- Daniel Walter Scott Photoshop Certified Instructor, Photoshop Certified Expert, Photoshop Certifed Associate (Visual Communications). .