Skip to main content

How to Setup a File Ready for Web and UI Design in Photoshop

Lesson 95 from: Adobe Photoshop Mastery

Daniel Walter Scott

How to Setup a File Ready for Web and UI Design in Photoshop

Lesson 95 from: Adobe Photoshop Mastery

Daniel Walter Scott

buy this class

$00

$00
Sale Ends Soon!

starting under

$13/month*

Unlock this classplus 2000+ more >

Lesson Info

95. How to Setup a File Ready for Web and UI Design in Photoshop

Lessons

Class Trailer

Getting Started

1

Class Introduction

03:24
2

Before you get Started with the Photoshop Advanced Course

01:28

Selections & Masking - Advanced

3

The Easiest Way in the World to Mask a Person in Adobe Photoshop

24:23
4

Class Project - Select Subject

01:41
5

Select Mask & Changing a Color using Photoshop - Color Range

10:00
6

Using Photoshop Selection to Fix Grass & Sky - Color Range

07:20
7

How to Change the Color of Skin in Photoshop - Color Range

08:05
8

How to Create an Ink Splash Image Around Text - Color Range

15:02
9

Class Project - Color Range in Adobe Photoshop

01:54
10

Mask on a Group Rather than each Layer

11:18
11

Advanced Masking using a Channels in Adobe Photoshop

14:14
12

Class Project - Channel Mask

01:30
13

How to Make Selections in Photoshop Based on the Focus Area

22:53
14

Class Project - Focus Area

01:11
15

Selection Trick Using the Smudge Tool in Photoshop

04:16
16

Future of Selections in Photoshop with Adobe Sneaks

07:04
17

Quiz - Selection & Masking

Preferences & Workflow

18

Advanced Preference Changes for Adobe Photoshop

08:36
19

How to Speed up Adobe Photoshop if it’s Running Slow

07:48
20

Workflow Tips & Tricks Like a Professional in Photoshop

13:45
21

Advanced Layer Tricks in Adobe Photoshop CC

05:58
22

Automatically Add a Watermark Text or Logo in Photoshop

08:29
23

Batch or Image Process Multiple Images at Once in Photoshop

09:05
24

How to put Loads of Images into one Photoshop File Quickly

07:04
25

Weird Adobe Photoshop Features & Easter Eggs

06:37

Fixing Images

26

How to Enlarge Images Without Becoming Blurry in Photoshop

06:57
27

How to Fix Blurry Images in Photoshop Using Shake Reductions

08:17
28

Advanced Color & Tone Correction Using Levels in Photoshop

06:44
29

Advanced Curves in Adobe Photoshop CC

06:34
30

Quiz - Fixing Images

Cropping & Aligning & Distorting

31

How to Reshape Images Without Distorting in Photoshop Content Aware Scale

09:44
32

How to use Content Aware Move in Photoshop

08:38
33

How to use Content Aware Extend in Adobe Photoshop

07:28
34

Removing Objects Using Content Aware Fill in Photoshop

07:01
35

Class Project - Content Aware Fill

01:03
36

Cropping Tricks Delete Pixel & Reveal Cropped Content in Photoshop

06:11
37

Automatically Crop & Rotate Scanned Documents in Photoshop

05:35
38

Crop Angled Images to Straighten Perspective Cropping Photoshop

04:42
39

How to Trim the White Away from the Edge of an Image in Photoshop

01:52
40

Automatically Align Layers in Adobe Photoshop CC

07:38
41

How to Reshape Images using the Puppet Warp in Photoshop

18:10
42

Class Exercise - Puppet Warp

01:14
43

How to Change the Perspective in Photoshop Perspective Warp

05:47
44

Quiz - Cropping & Aligning & Distorting

Color

45

How to Color Black & White Image in Photoshop

09:42
46

How to Create a Duotone Effect in Adobe Photoshop CC

09:28
47

44. Class Project – Duotone in Adobe Photoshop

02:20
48

How to create the Glitch Effect in Adobe Photoshop

07:01
49

Class Project - Glitch Effect in Adobe Photoshop

00:44
50

Color Grading with Orange & Teal Effect in Adobe Photoshop

05:36
51

Class Project - Color Grading in Adobe Photoshop

00:49
52

Quiz - Color

CC Libraries

53

Advanced CC Libraries Tricks and Tips Photoshop

19:15

Typography

54

Advanced Type Trick & Workflows in Adobe Photoshop

19:38
55

Photoshop Can Guess your Font Using Match Fonts

10:43
56

Quiz - Typography

Artboards

57

52. Adding Artboards to your Photoshop Workflow Properly

05:24
58

How to Add Images Correctly to a Photoshop Artboard

08:17
59

Using Smart Objects & Relinking Images in Photoshop

04:10
60

Advanced Speed Tricks for Updating Artboards in Photoshop

04:09
61

Export Artboards as PDF & Separate JPGs in Photoshop

05:38
62

Quiz - Artboards

Retouching

63

Advanced Tricks for Healing Brush for Retouching in Photoshop

08:24
64

Don’t Forget About Clone Tool Stamp in Photoshop

06:09
65

How to use the Patch Tool for Retouching in Photoshop

06:41
66

Class Exercise – Retouching in Photoshop

01:15
67

How to Retouch in Photoshop Using Face Aware in Liquify

06:50
68

How to Use Vanishing Point to Mocking up Designs in Photoshop

12:19
69

Vanishing Point - Cloning & Healing at an Angle in Photoshop

11:19
70

64. Class Exercise - Vanishing Point in Photoshop

00:51
71

Fixing & Retouching Skin Tone in Adobe Photoshop

06:01
72

Retouching Eyes by Enhancing in Adobe Photoshop

08:00
73

Retouching Eyes with a Little Bit of Fakery in Photoshop

09:00
74

Fully Faking Believable Eyes in Adobe Photoshop

06:45
75

Class Project – Eyes in Photoshop

00:51
76

70. How to Realistically Whiten Teeth in Adobe Photoshop

11:44
77

Class Project – Teeth in Photoshop

00:57
78

Quiz - Retouching

Layers

79

Difference Between Place Linked vs Place Embedded in Photoshop

08:22
80

What is the Difference Between Fill & Opacity in Layer

01:11
81

How to Use & Export Layer Comps in Adobe Photoshop

03:27

Visual Styles & Effects

82

75. How to Create a Double Exposure in Adobe Photoshop

11:07
83

Class Project - Double Exposure in Photoshop

01:17
84

How to Create a Watercolor Painting Effect in Photoshop

09:23
85

Class Project – Watercolor in Photoshop

00:32
86

How to Decay Pixel Explosion Dispersion Method in Photoshop

13:47
87

How to Make Exploding Shoe Effect in Adobe Photoshop

10:49
88

Class Project – Decay in Photoshop

00:51
89

Quiz - Visual Styles & Effects

Video & Animated Gifs for Social Media

90

How to Edit Video in Adobe Photoshop

25:42
91

Parallax Effect to Make Photos Move in Photoshop

13:22
92

Class Project – Parallax in Photoshop

01:15
93

How to Create Live Images - Cinemagraphs in Photoshop

13:19
94

Class Project – Cinemagraph in Photoshop

01:35

Web Design

95

How to Setup a File Ready for Web and UI Design in Photoshop

09:32
96

How to Export Your Web Design UI Project for Dreamweaver

07:57

3D

97

How to Make 3D Text & 3D Logos in Photoshop

11:52
98

How to Add and Change 3D Materials & Textures in Photoshop

08:42
99

Using Cameras & Depth of Field in 3D Photoshop

05:12
100

Adding Lights & Casting Shadows Using Photoshop 3D

10:01
101

How to Export a High Quality 3D Image from Photoshop

04:42
102

Class Project – 3D in Photoshop

01:08
103

How to Create Fake 3D Lines & Type in Photoshop

09:33
104

Fake 2.5D Gradient Effect with Paths in Photoshop

07:10
105

Class Project - Fake 3D in Photoshop

00:46

Mock-ups & Presenting Your Work

106

Using Free Templates & Adobe Market to Mockup in Photoshop

11:07
107

How Make a Reusable Mockup in Photoshop Using Smart Objects

06:40
108

Mockup Poster Against a Wall Using Photoshop

08:16
109

How to Make a Simple UI App Web Design Mockup Using Photoshop

06:06
110

Class Project – Mockups in Photoshop

01:00

Exporting

111

How to Proofing Colors in Adobe Photoshop Ready for Print

04:04
112

How to Tidy Up your Photoshop Files Before Sending Them Out

10:21
113

How to Package Your Photoshop File to Include Linked Images

07:22
114

3 Kinds of File Export for Photoshop Social Media Web & Print

12:59
115

Quiz - Exporting

What’s Next

116

What’s Next After Your Photoshop Advanced Course

01:05

Final Quiz

117

Final Quiz

Lesson Info

How to Setup a File Ready for Web and UI Design in Photoshop

Hi there in this video, we're going to talk about web design and Photoshop. We're not gonna cover every single part of web design and Photoshop. It can be a big thing. I've actually made a separate course specifically for web design and Photoshop. It's videos by itself. So we're not going to cram it all here in the advanced Photoshop course. What I'll do is I'll give you the high level important details. If you want to go deeper, you can go check out the other course. It's also worth mentioning here that Photoshop is a perfectly great tool to mock up websites. You can see here I got this mock up of a website that this is the way it looks like on a webs on a desktop and that's what it looks like on a mobile, a responsive website. You can mock up mobile apps here, but it is just a mock up. Eventually you're gonna have to go get this thing made in a web design tool. Something like Dreamweaver would be useful. Or you can send it to a developer to be made in the next couple of videos. I'm ...

going to show how you would mock it up in Photoshop and how to then pass on information to a web designer to go and build it for you or for yourself to go and build another note is that Photoshop is a perfect tool to do it, illustrator might be a great tool for you as well if your skills are better in that. And the third one is adobe XD. Adobe XD is probably the more professional mock up tool that adobe has but that's a whole new program to learn. It's up to you. I've got courses in all three of those for web design. Okay, illustrator XD or Photoshop. So that's enough talking. Let's get in and get started. Alright, so first up let's go to file and it's good in new Photoshop. Super helpful. And giving us over here where it says web and mobile. Just some templates to start with in terms of sizes. So in this case we're doing a kind of a website, a responsive website. So we want to design it for desktop mobile and tablet sizes. So we're gonna start with one of these. If you're doing say a mobile app design, you're going to design it in mobile or you can just type in the pixel height with here. I'm gonna start with web and we're gonna start with the most common websites Now. We're starting from scratch. What you can do is under web. Can you see all these templates down the bottom here. Okay, so there's some cool wire framing templates. Lots of stuff ready to go to help you get started with website design. Okay, so have a little look through those if you like one click it, it'll say download over here and it will slowly download. You can open it up and make the changes. We're going to start from scratch. Ok. So I've picked web most common. I'm going to click create and the big thing that's going to give me by using that template along the top there rather than just typing the pixels is going to start doing outboards so we know how to make outboards. They become particularly useful here. So this one is going to be my mock up for my desktop size. I'm just gonna rename that one desktop. I'm going to create a new upward. Okay, so I'm gonna click in here upward tool a little plus and this one is instead of 13 16. This one is going to be a typical tablet size which is +768. Okay. It'll depend on what sizes you're designing for and the height like a lot of these things. Okay. Most websites are scalable so it doesn't really matter what the height or at least I'm going to design it so it can be scrolled up the thing with this desktop size here, I'm gonna click on the edge of it and just make this longer because I want my website to be it's going to be a bit bigger and it's definitely gonna stick within the width but it's going to be scroll Herbal in terms of the website, let's do the last one. Let's do mobile actually let's name everything. This one is going to be tablet. Let's make a new one. Let's call this one phone and typical phone width is generally Designed for 4 80. All right. So you can see our outboards are super useful when you're doing all you. I work okay. We're doing web site design. But if you were doing phone, you could just have all the different screens. Just lots of duplicates of that phone. Okay, login screen sign up billing payments. Just lots of repeats. Now, the one thing you're doing when you are doing web site design is using something called grids. I guess this requires a little bit of pre knowledge and I guess that longer course would help. But this is useful for that. People that are already doing web design. One of the hardest things that could be setting up a grid, but whether it's magazine design or web design. Often pages divided into columns. Typically 12 columns matches bootstrap and a few other libraries. So we want this grid instead of actually drawing them in ourselves. So command our turns. The rulers on control are on a pc. Just trying to kind of lay out this grid system. There's a real easy trick. Good of you and go to new guide from Lout. You can see in here. Presets. I want a 12 column grid. Let's put a 12 column grid in there. You decide whether you need margins or not. Either side, top and bottom. It's that easy. So that 12 column grid persists on tablet and mobile. But what I find more useful when I'm actually designing is just to have six on both of these. Six and four. Generally you could put 12 in there if that's the way you prefer to design. But for me, all I need to see here is six. So with tablet selected few, your guide layout preset, It doesn't have six. So I'm just going to type, it divides it up, you can adjust the gutter depending on what framework you're using. Let's say I'm using bootstrap if you have no idea what bootstrap is. Don't worry. It uses roughly about 20 pixels in between. Same with the phone and I had you and I'm probably just going to do four in this one. Okay. Okay, so let's look at adding just some basic stuff to get started before we look at exporting. So on my desktop I'm going to go file place embedded or linked values embedded and in your exercise files under web there's one in there called background brick building. I'm gonna place them in, make them a little bigger, moving to the top, hit return and I'm just gonna use my generic Photoshop skills. There's nothing special about it. I want to start designing what I'd like to do to this guy. I'm gonna put type over the top of him but he's too light so with the selected, I'm going to go to adjustments levels and then just yank this one up and just yank the white up just to kind of darken it down, bring it to the whole document I want it to just affect the background brooks If the guides are getting annoying. Command and colon. Okay. The colon is next to your alki. Normally let's control colon on a Pc. So the grids are helpful sometimes and sometimes in the way you turn them on and off that way. So I'm going to now add my type tool. I'm going to click once I'm gonna pick our web safe font. Gonna use roboto putting in my hair a text. My kind of large. Welcome to my website. Let's make things awesome. Just because meeting text on an image because I want to work through some of the kind of high level principles of web design inside of Photoshop, mainly the exporting grids on. I'm going to make sure this lines up with my grid system. Somehow grab my type tool put in some text. If you drag out a box, make sure the font sizes something readable. Not so big. And I'm going to go to type place Lauren ipsum That'll do for the moment. I'm gonna put in a fake never barrel on the top due to my rectangle tool filled with black. I'm going to have a semi transparent now. I'm gonna add my not to the actual box itself. Just down here we're gonna have a homepage the about us page and they contact us. So remember this in Photoshop is just a mock up. Okay, visual that we can get the clients signed off, You don't have to be a web designer or developer to make this work. Okay, just look and feel you are ui designer. You're in charge of making this look great and work. Make sure the user experience is nice to put in some last basic stuff you have to follow along. But I guess I just wanted to just show you that we're just using Photoshop as a mock up tool. It's not actually creating the code. You can do little bits. Okay. Can help our developers out. If you're a designer, you can design and Photoshop then build it in something like Dreamweaver. But even if you don't you can just do the design side. It makes you a web designer, not a web developer. And you can just do the Photoshop work. Then you'll have to hand it over to somebody else to do. Html and CSS if you are interested in getting into that type of thing. The front end web design. Okay. Something like Dreamweaver might be a good start for you. And I've got a course. I've got a bunch of courses with Dreamweaver. But let's say this is the basics to get started. I just want to show you that we are just mocking this up using our Photoshop tools. We'll turn it into a website later on. Not in this course, But you can get by by being a web designer and just mocking things up. All right, I'm going to save this and what I'll do is actually in your exercise files under 14. Web actually included my template that I've got from my Photoshop course and it just has all the grids set up already ready to go for a responsive template. You might get started with that. Rather than having to go into view guide yourself and work out what all the sizes need to be. Alright, that's it for this video. Let's get into the next one where we look at getting some of the information out of our mock up and how we get it to our web developer to start building it as a website.

Class Materials

Bonus Materials with Purchase

Exercise Files
Completed Files Part 2
Completed Files Part 1

RELATED ARTICLES

RELATED ARTICLES