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

buy this class

$00

Buy Class

Sale Ends Soon!

starting under

$13/month*

Unlock this classplus 2000+ more >

79.7K Students

99% Recommend this Class

00 Student Work

0 Video lessons in HD
00h 00m of class content
Exclusive bonus content
Lifetime access, anywhere, anytime
Streaming access on desktop and mobile browsers
Download and offline access with class purchase
Offline sync with our iPhone & iPad apps
100% satisfaction guarantee

Daniel Walter Scott

Multi-award winning, influential media designer & Adobe Certified Instructor with 15+ yrs of experience.

SEE INSTRUCTOR'S CLASSES

topics covered in this class

Adobe Photoshop Post-Processing Photo Editing

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.

2,000+ classes ranging from fundamentals to advanced techniques.

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

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

Lesson Info

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

Lessons

Class Introduction

Before you get Started with the Photoshop Advanced Course

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

Class Project - Select Subject

Select Mask & Changing a Color using Photoshop - Color Range

Using Photoshop Selection to Fix Grass & Sky - Color Range

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

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

Class Project - Color Range in Adobe Photoshop

Mask on a Group Rather than each Layer

Advanced Masking using a Channels in Adobe Photoshop

Class Project - Channel Mask

How to Make Selections in Photoshop Based on the Focus Area

Class Project - Focus Area

Selection Trick Using the Smudge Tool in Photoshop

Future of Selections in Photoshop with Adobe Sneaks

Quiz - Selection & Masking

Advanced Preference Changes for Adobe Photoshop

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

Workflow Tips & Tricks Like a Professional in Photoshop

Advanced Layer Tricks in Adobe Photoshop CC

Automatically Add a Watermark Text or Logo in Photoshop

Batch or Image Process Multiple Images at Once in Photoshop

How to put Loads of Images into one Photoshop File Quickly

Weird Adobe Photoshop Features & Easter Eggs

How to Enlarge Images Without Becoming Blurry in Photoshop

How to Fix Blurry Images in Photoshop Using Shake Reductions

Advanced Color & Tone Correction Using Levels in Photoshop

Advanced Curves in Adobe Photoshop CC

Quiz - Fixing Images

How to Reshape Images Without Distorting in Photoshop Content Aware Scale

How to use Content Aware Move in Photoshop

How to use Content Aware Extend in Adobe Photoshop

Removing Objects Using Content Aware Fill in Photoshop

Class Project - Content Aware Fill

Cropping Tricks Delete Pixel & Reveal Cropped Content in Photoshop

Automatically Crop & Rotate Scanned Documents in Photoshop

Crop Angled Images to Straighten Perspective Cropping Photoshop

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

Automatically Align Layers in Adobe Photoshop CC

How to Reshape Images using the Puppet Warp in Photoshop

Class Exercise - Puppet Warp

How to Change the Perspective in Photoshop Perspective Warp

Quiz - Cropping & Aligning & Distorting

How to Color Black & White Image in Photoshop

How to Create a Duotone Effect in Adobe Photoshop CC

44. Class Project – Duotone in Adobe Photoshop

How to create the Glitch Effect in Adobe Photoshop

Class Project - Glitch Effect in Adobe Photoshop

Color Grading with Orange & Teal Effect in Adobe Photoshop

Class Project - Color Grading in Adobe Photoshop

Quiz - Color

Advanced CC Libraries Tricks and Tips Photoshop

Advanced Type Trick & Workflows in Adobe Photoshop

Photoshop Can Guess your Font Using Match Fonts

Quiz - Typography

52. Adding Artboards to your Photoshop Workflow Properly

How to Add Images Correctly to a Photoshop Artboard

Using Smart Objects & Relinking Images in Photoshop

Advanced Speed Tricks for Updating Artboards in Photoshop

Export Artboards as PDF & Separate JPGs in Photoshop

Quiz - Artboards

Advanced Tricks for Healing Brush for Retouching in Photoshop

Don’t Forget About Clone Tool Stamp in Photoshop

How to use the Patch Tool for Retouching in Photoshop

Class Exercise – Retouching in Photoshop

How to Retouch in Photoshop Using Face Aware in Liquify

How to Use Vanishing Point to Mocking up Designs in Photoshop

Vanishing Point - Cloning & Healing at an Angle in Photoshop

64. Class Exercise - Vanishing Point in Photoshop

Fixing & Retouching Skin Tone in Adobe Photoshop

Retouching Eyes by Enhancing in Adobe Photoshop

Retouching Eyes with a Little Bit of Fakery in Photoshop

Fully Faking Believable Eyes in Adobe Photoshop