Hi, this is Anne with Graphic Design How To, and as a graphic designer who creates websites
in Photoshop, I'm going to show you how to hand off your assets from Photoshop to a
developer. All right, let's get started. Okay, so when I first create a web design like this,
I make my canvas 1500 pixels wide. Web pages can be pretty dang long, and it's okay.
So I usually start out at 1500 x 2200. So that's everything that goes all the way out to the edge.
Right here - all this stuff. And then I also have an inner margin, which is 1310...and these
are specs that my web developers and engineers have given me at my freelance company. To make
that 1310 pixel margin, I just hit M, which is my Rectangular Marquee and draw a square like this.
I make sure it's 1310 wide, and then I start a new layer and just fill this with a color.
Then I select all with CMD A or CTRL A and then hit the letter V. And then I get these little
align tools at the top, and I just align it. After that I can hit CMD R or CTRL R and just pull the
rulers over from the side to make guides. So that is my process for creating the document. Now
the first thing you're going to want to do is to make a copy of this, and we're going to call this
'original.' So I've got 2 of the exact same thing out there. Now when I hand this off to developers,
I need to give them everything that's a graphic or a photo. But I generally don't need to give them
anything that's text unless there's a button with a weird shape or something like that. So
in this case, I would not give them any of this, but I would give them this piece. A
lot of times they don't need this because they have a font that includes that...but
I have had them ask for it. So for this tutorial, I'll include it. When I have full
width images like this, I actually put those in another document that is 3000 pixels wide,
because 1500 is never enough for a full size image like that. And I've already created one of those.
These are the two full size images on the page, and they go all the way out to the edge. And this
document right now is 1500 pixels wide, but you should always keep your photos as smart objects.
That way you can resize them to be bigger without losing quality. So we'll change our
image size to 3000. Now you'll notice that I've got a couple of blue layers up here.
Those are the overlays on this. So I'm going to just select all three of these and hit CMD
E or CTRL E to merge them. And this one is fine as is. Let's go back to the homepage. When I'm
doing this, I use my CMD key to toggle Auto Select on while I'm doing this. So that way I can just
CMD click on this to highlight over here in my layers. I've already named this one 'Search,' but
I'm going to put the word 'icon' in front of it. The next thing we'll do is this logo. And so I go
through and rename all my layers first. This one is logo, I title it by the type of graphic it is
and then I put descriptive words afterwards. So this is a logo, and it's the perspective logo.
Okay, so these two things are done. And the web team will not need any of these things up here,
because they're not a graphic or a photo. I'm going to select all the things down here
and lock them with CMD ?, that's probably CTRL ? if you're on a PC. And now I can just select
these things up here that I don't need and delete those. I don't need this big photo because it's in
the other document, and I'll get to it later, but I'm going to go ahead and grab this icon,
and I'm going to call this 'icon webinar.' I'm going to go ahead
and lock it with CMD ?, and I will also lock this and unlock this little 'icon search.'
Now I can select all of these things and just delete them. Now when I do that it selects too
much, so I'm going to go ahead and get down here in my layers and deselect those things. I'm going
to go ahead and kind of lock all these things down here, so I don't accidentally select them.
And then I'm going to select all this up here and just delete it.
So the only things that are left... it looks like this picture might have actually
been locked. So I'll select all my layers, and then lock them all and unlock them all.
So now I can just select this picture and delete it.
So I do all this by just locking certain things and then selecting other things and deleting them,
always making sure to rename everything in a way that will make sense to a developer.
I'll include these little arrows,
and then anything that's more than one layer like this needs to be combined.
So I just select both, and combine them into one by hitting CMD E or CTRL E.
That's just like going to Layer > Merge Layers right here.
Okay, so the only things we're keeping from that section are this arrow, this arrow,
this guy, and this quotation marks.
This is a 'button orange.' These two, when I combine everything, they actually squash
together into one piece, so I'm going to just use my M tool, which is my Rectangular Marquee,
and draw a box around one side, and then just cut and paste. And then I'll make a copy of this.
And I'll just delete it from over here.
And I'll move this over, come down here and delete this from over here. So now they're separated.
Now, the social icons, I used to give them to the developers as these little separate PNG files, but
I just made them a font, and that way, they can input them as a font and color them however they
like. And they're the same for all the clients. So I'm just going to delete those, they already
have those. We'll need this logo too, because it's different. So this is 'logo perspective white,'
and then the rest of this, they can just create it with CSS. So we will delete all that. So there are
only a few little graphics and images I need to hand off to them. When everything's done. I select
all the layers with OPTION CMD A, or ALT CTRL A on a PC, and I just ungroup everything with Shift CMD
G or Shift CTRL G. And sometimes I'm left over with some little weird things like this. This
is just a blank layer, so I'll delete it. And this is actually text. I don't... I don't want this to
be text. Usually, my developers want things like this to be a picture. So I'm going to go ahead and
right click and choose Rasterize Type. Now I'll go down and make sure everything else looks good.
There's another blank layer. Now I do see that I didn't name everything, so I'll go ahead and
fix that. Okay, but everything else looks good. So now I can just go to File, Export, and Layers
to Files. I'm going to click Browse, and then I'll just navigate to the place I want to save them in.
Then you'll have a file name prefix. I actually just delete all this. Otherwise, your file names
get super long. We'll want to choose PNG 24, and then I'll choose Transparency and Trim Layers.
And we'll run it, and it goes through the process of saving all the files separately.
Okay, so let's see how it did. I'll come out here, and I'll hit my spacebar (on a Mac) to
just preview everything. Okay, everything looks good. Now, some of them might look really blurry,
but when I view it at full size, it looks fine. Now you'll notice that you have like six
characters that Photoshop adds to the beginning. So I always take those off, and I do it with
something called A Better Finder Rename - it's this little program right here,
which is super awesome. When I bought it, it cost like $20, but it's free if you're
only doing 10 at a time. Okay, we'll come up here to Character Positions and Ranges,
and I'll just remove the first six characters. So it's going to take off those first six characters
and leave us with this as our filename. And I'll just Perform Renames, and it's done. And here
are all the files renamed. So this is really nice. Now we'll also want to do the same thing
with the large full-width images. I'm going to call this one 'photo blue overlay.' And
this one can be 'photo header.' We'll go to File > Export Layers to Files.
I'll pick my location, no file name prefix, and the rest is okay. These are kind of big files, so
it takes Photoshop a second. Okay, and now we can look out here and make sure they look okay...and
they do. I'm going to open up that same one and just drag those two on here
and Perform Renames. Okay, so this is all the images that I'm going to give my developers.
Now in addition to this, I'm going to give them all the colors and fonts in my whole website. So
I usually prepare them a file like this, and this is an Illustrator file - I just save as a PDF.
So I tell them 'here are your fonts that I used in this website. Here are all the colors that
I used and where they go.' And these aren't the right colors, I didn't feel like actually
changing them out for Perspective Trucking Group, which is a fake website. All right, so I pulled up
my original web page. So I'm going to export this as a JPEG. We'll go to File > Export > Export As
and then choose JPG, and Export. I'll just save it out there,
and then I'll pull this on to Acrobat to create a PDF file from it, and we'll save this.
Okay, so now we can take all the files that we've prepared for them
and make a zip file from them. So to create a package for them, I always take the colors and
the PDF of the homepage and just drag those into that same folder. I like to number these 1 and 2,
so they'll always be at the top like this. And then I'll get back on my folder and
I go to File > Compress PT. And now I have this PT zip. So I'm going to rename this to
PT Web Assets. And this is the file that I can email to someone. Now this one is 9.4 megabytes,
so it's a little bit big, but you can always go with WeTransfer or something like that.
And that's it. All right, if you liked this video and you want to see more videos like this,
just hit the Subscribe button and little bell next to it, and you'll be notified
every time a new video comes out. All right, I'll see you in the next video. Thank you!!!