Skip to main content

How to Export Your Web Design UI Project for Dreamweaver

Lesson 96 from: Adobe Photoshop Mastery

Daniel Walter Scott

How to Export Your Web Design UI Project for Dreamweaver

Lesson 96 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

96. How to Export Your Web Design UI Project for Dreamweaver

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 Export Your Web Design UI Project for Dreamweaver

Hi there. This video is all about how to export our CSS our image is everything we need to build a website from our mock up. Even if you don't plan on doing web design in Photoshop hang around because there's some pretty cool export settings that you might use for say print or social media exports. It's worth watching. Hang about. Let's get started. Okay. I cheated. I took our example from the last video and did a whole bunch of extra work So you can skip to here and go to file open and then your exercise files, there is a file called web design example. Open that one up. If it's asking for missing fonts, just click cancel. Don't worry about updating them for the moment. So basically this is just a Photoshop document. Nothing special. There's text boxes, there's images. I've done some cropping to some of them. I've added some green filters to this. I've ignored doing the tablet just because I'm lazy. But let's say I've got a desktop view, a mobile view and a tablet view and the client ...

likes it. They've signed it off and they say, yeah, I like the designs. Can you go and start making this now if you are just the designer. Okay. You're just working in Photoshop and then that's it. You don't want to touch the html and CSS you want to hand this off to somebody else. There are things you can do to make their life easy if you're like me and you like doing the extra stuff. Do you like doing the front end web design, you can also pull information out of here to make your life easier. In something like Dreamweaver, let's say it's this font here. If I send it to my web developer friend mel, he says, what font is it? What size is it? And I have to create this kind of like big long list of what it should be. Otherwise I send them jpeg and he guesses that's no fun. So information that I can give him that make sure that it's going to be perfect. I make sure I click on the right layer so it's selected. I can go up the top header layer and there's this option, copy CSS. CSS is the styling of the font. Nothing really happens. Right? Just copy it. And then what I can do is I can paste into an email or into the dock like this. I can just paste in the CSS and it's going to tell him lots of information. Probably more than he needs, but he's going to know the font size, what font family I'm using what color I'm using the line high. Whether it's centered all sorts of super useful information. If you're a developer, you might do yourself a favor and maybe can you see it's used? It's created the class based out of the name. So you might give it a different name instead of just letting it be layer one. Or let's make this, you can call this maybe H one, there's bits in here they don't need, but if you're not sure seeing them everything and they'll be able to pick out the bits they need. Probably don't need any of that. Well that now if Malcolm comes back to me and says, hey, I've picked this font and there's nothing like this, I can say, hey, what happened? I sent you the perfect details. So it's not just for text, it's useful for boxes. So this big rectangle that I've done up here for my navigation, I can have it selected here, I can go to layer, I can go to copy CSS the same thing in a text document or an email. I can paste it in. Okay, so there's my never there's the color capacity for it as well. I'm probably not worried about position, but definitely the height that's going to match my mock up perfectly. So you can just work your way around building up a list of titles subheadings, body copy just to ensure that your website gets matched perfectly. So let's getting out the text, let's look at the images. So let's say this image in the background here. This fella, the way to make this easier is to name the layer. Okay, so I'm going to drag it out here when you name the layer, this is what the jpeg is going to be called. Okay, so that's why I've put hyphens in here because it's best to have images for websites that don't have spaces, they have hyphens or underscores and I'm making sure that I'm using S E O friendly words in this case is not particular search engine friendly, but you get the idea, let's say now I want to send them this background graphic. All you need to do is right click it and there's an option in here that says you can see this is quick export as PNG. For some reason the default is a PNG. It's not something that I use very often. So what you can do is you can go to your preferences and change this quick export to jpeg on a Mac. It's Photoshop CC preferences go to general, not a p c. It's in the edit right down the bottom. You'll find preferences down here under export. Okay, I'm gonna switch this to Jpeg. So Jpeg my favorites depending on whatever your quality favorite is. I'm going to go 60 click OK. And it means now this graphic here, I can right click and just go quickly export tell it where I wanted to go. Was going to go on my desktop and this is going to be images for website and you can see it defaulted to jpeg used the name of that layer. And hopefully now I'm a desktop, there's my images for website, there's my topic. Alright, back into Photoshop. Now if you have a person who used to use slices just so you know, slices don't get used anymore. You can use them, but this is an easier way of doing it. Same with this image here is a little practice. This guy here, I've given it a good name, I can right click it go too quick export as J peg it saved, you can see how much quicker this is. Now, let's have a look and there it is, there another cool thing you can do is let's say I invert this right, click it quick export as J peg save replace. You can see you can get a nice little flow of getting these images out ready for your site. Let's look at one last little trick you can do when you're exporting stuff for websites, it's called adobe generator. So first of all, I'm going to file save as, because I want to show you a little trick, so I'm gonna stick it on my desktop, this is going to be called dance tricks, just because I couldn't think of a better name and we're going to turn on this thing called file generate majestic. So we're using it for website design, we could use this for, say, social media export what it's useful for is over here. I've got this thing called image books. If I give it the extension JPG for jpeg and click return. What ends up happening is Photoshop on my desktop dan's trick assets. So there's the PSD that I made, it's automatically generated. This hyphen assets folder in here, can you see, I've got this one called Image Books. Anything you add an extension to will actually automatically create. Let's have a look at this one here. So at the end here dot j p G without doing anything else. They're the same. Go on. And it's kind of like a live dynamic thing. Let's go into here. Remember we inverted this inverted back. You don't have to do anything else but you can see Image books is updated. So it's kind of a nice live thing, let's say these icons here, these icons transparent, right, there's holes in them. So this one here, I'd rather be dot PNG because we know PNG's PNG allow for transparency. So just give it the dot PNG, check it out. There's a PNG ready to go. So for that to work, you need to have saved your file, make sure you've turned generate on, it's going to take on and nothing really happens. Right until you start naming things with P and G S J pigs, Photoshop goes and exports them, putting the color effects off, let's save, jump back out here. I should have a black version. If you want to stop updating you can turn off, generate or just copy and paste them out of that folder that it's been made. That folder that it's made called assets. Just put them some rest. All right, So that's the skinny version of using Photoshop for web design. We used lots of art boards. The guides are super helpful for getting everything to line up when we're exporting as well. We can export the CSS, which is perfect for things like boxes and type anything that's generated normally with code on our website. The things that aren't code like images, Jpeg and PNG s. We can either right click them and go export as, or we can get fancy and use adobe generator. Alright. That's gonna be it for web design. I will see you in the next video.

Class Materials

Bonus Materials with Purchase

Exercise Files
Completed Files Part 2
Completed Files Part 1

Ratings and Reviews

Uli N
 

Great class, but outdated PS version. It was confusing sometimes. Some tools are not in PS anymore and more tools have been added which is not included in the course.

Nadim Rouf
 

Student Work

RELATED ARTICLES

RELATED ARTICLES