3 Kinds of File Export for Photoshop Social Media Web & Print
Daniel Walter Scott
Lesson Info
114. 3 Kinds of File Export for Photoshop Social Media Web & Print
Lessons
Class Introduction
03:24 2Before you get Started with the Photoshop Advanced Course
01:28 3The Easiest Way in the World to Mask a Person in Adobe Photoshop
24:23 4Class Project - Select Subject
01:41 5Select Mask & Changing a Color using Photoshop - Color Range
10:00 6Using Photoshop Selection to Fix Grass & Sky - Color Range
07:20How to Change the Color of Skin in Photoshop - Color Range
08:05 8How to Create an Ink Splash Image Around Text - Color Range
15:02 9Class Project - Color Range in Adobe Photoshop
01:54 10Mask on a Group Rather than each Layer
11:18 11Advanced Masking using a Channels in Adobe Photoshop
14:14 12Class Project - Channel Mask
01:30 13How to Make Selections in Photoshop Based on the Focus Area
22:53 14Class Project - Focus Area
01:11 15Selection Trick Using the Smudge Tool in Photoshop
04:16 16Future of Selections in Photoshop with Adobe Sneaks
07:04 17Quiz - Selection & Masking
18Advanced Preference Changes for Adobe Photoshop
08:36 19How to Speed up Adobe Photoshop if it’s Running Slow
07:48 20Workflow Tips & Tricks Like a Professional in Photoshop
13:45 21Advanced Layer Tricks in Adobe Photoshop CC
05:58 22Automatically Add a Watermark Text or Logo in Photoshop
08:29 23Batch or Image Process Multiple Images at Once in Photoshop
09:05 24How to put Loads of Images into one Photoshop File Quickly
07:04 25Weird Adobe Photoshop Features & Easter Eggs
06:37 26How to Enlarge Images Without Becoming Blurry in Photoshop
06:57 27How to Fix Blurry Images in Photoshop Using Shake Reductions
08:17 28Advanced Color & Tone Correction Using Levels in Photoshop
06:44 29Advanced Curves in Adobe Photoshop CC
06:34 30Quiz - Fixing Images
31How to Reshape Images Without Distorting in Photoshop Content Aware Scale
09:44 32How to use Content Aware Move in Photoshop
08:38 33How to use Content Aware Extend in Adobe Photoshop
07:28 34Removing Objects Using Content Aware Fill in Photoshop
07:01 35Class Project - Content Aware Fill
01:03 36Cropping Tricks Delete Pixel & Reveal Cropped Content in Photoshop
06:11 37Automatically Crop & Rotate Scanned Documents in Photoshop
05:35 38Crop Angled Images to Straighten Perspective Cropping Photoshop
04:42 39How to Trim the White Away from the Edge of an Image in Photoshop
01:52 40Automatically Align Layers in Adobe Photoshop CC
07:38 41How to Reshape Images using the Puppet Warp in Photoshop
18:10 42Class Exercise - Puppet Warp
01:14 43How to Change the Perspective in Photoshop Perspective Warp
05:47 44Quiz - Cropping & Aligning & Distorting
45How to Color Black & White Image in Photoshop
09:42 46How to Create a Duotone Effect in Adobe Photoshop CC
09:28 4744. Class Project – Duotone in Adobe Photoshop
02:20 48How to create the Glitch Effect in Adobe Photoshop
07:01 49Class Project - Glitch Effect in Adobe Photoshop
00:44 50Color Grading with Orange & Teal Effect in Adobe Photoshop
05:36 51Class Project - Color Grading in Adobe Photoshop
00:49 52Quiz - Color
53Advanced CC Libraries Tricks and Tips Photoshop
19:15 54Advanced Type Trick & Workflows in Adobe Photoshop
19:38 55Photoshop Can Guess your Font Using Match Fonts
10:43 56Quiz - Typography
5752. Adding Artboards to your Photoshop Workflow Properly
05:24 58How to Add Images Correctly to a Photoshop Artboard
08:17 59Using Smart Objects & Relinking Images in Photoshop
04:10 60Advanced Speed Tricks for Updating Artboards in Photoshop
04:09 61Export Artboards as PDF & Separate JPGs in Photoshop
05:38 62Quiz - Artboards
63Advanced Tricks for Healing Brush for Retouching in Photoshop
08:24 64Don’t Forget About Clone Tool Stamp in Photoshop
06:09 65How to use the Patch Tool for Retouching in Photoshop
06:41 66Class Exercise – Retouching in Photoshop
01:15 67How to Retouch in Photoshop Using Face Aware in Liquify
06:50 68How to Use Vanishing Point to Mocking up Designs in Photoshop
12:19 69Vanishing Point - Cloning & Healing at an Angle in Photoshop
11:19 7064. Class Exercise - Vanishing Point in Photoshop
00:51 71Fixing & Retouching Skin Tone in Adobe Photoshop
06:01 72Retouching Eyes by Enhancing in Adobe Photoshop
08:00 73Retouching Eyes with a Little Bit of Fakery in Photoshop
09:00 74Fully Faking Believable Eyes in Adobe Photoshop
06:45 75Class Project – Eyes in Photoshop
00:51 7670. How to Realistically Whiten Teeth in Adobe Photoshop
11:44 77Class Project – Teeth in Photoshop
00:57 78Quiz - Retouching
79Difference Between Place Linked vs Place Embedded in Photoshop
08:22 80What is the Difference Between Fill & Opacity in Layer
01:11 81How to Use & Export Layer Comps in Adobe Photoshop
03:27 8275. How to Create a Double Exposure in Adobe Photoshop
11:07 83Class Project - Double Exposure in Photoshop
01:17 84How to Create a Watercolor Painting Effect in Photoshop
09:23 85Class Project – Watercolor in Photoshop
00:32 86How to Decay Pixel Explosion Dispersion Method in Photoshop
13:47 87How to Make Exploding Shoe Effect in Adobe Photoshop
10:49 88Class Project – Decay in Photoshop
00:51 89Quiz - Visual Styles & Effects
90How to Edit Video in Adobe Photoshop
25:42 91Parallax Effect to Make Photos Move in Photoshop
13:22 92Class Project – Parallax in Photoshop
01:15 93How to Create Live Images - Cinemagraphs in Photoshop
13:19 94Class Project – Cinemagraph in Photoshop
01:35 95How to Setup a File Ready for Web and UI Design in Photoshop
09:32 96How to Export Your Web Design UI Project for Dreamweaver
07:57 97How to Make 3D Text & 3D Logos in Photoshop
11:52 98How to Add and Change 3D Materials & Textures in Photoshop
08:42 99Using Cameras & Depth of Field in 3D Photoshop
05:12 100Adding Lights & Casting Shadows Using Photoshop 3D
10:01 101How to Export a High Quality 3D Image from Photoshop
04:42 102Class Project – 3D in Photoshop
01:08 103How to Create Fake 3D Lines & Type in Photoshop
09:33 104Fake 2.5D Gradient Effect with Paths in Photoshop
07:10 105Class Project - Fake 3D in Photoshop
00:46 106Using Free Templates & Adobe Market to Mockup in Photoshop
11:07 107How Make a Reusable Mockup in Photoshop Using Smart Objects
06:40 108Mockup Poster Against a Wall Using Photoshop
08:16 109How to Make a Simple UI App Web Design Mockup Using Photoshop
06:06 110Class Project – Mockups in Photoshop
01:00 111How to Proofing Colors in Adobe Photoshop Ready for Print
04:04 112How to Tidy Up your Photoshop Files Before Sending Them Out
10:21 113How to Package Your Photoshop File to Include Linked Images
07:22 1143 Kinds of File Export for Photoshop Social Media Web & Print
12:59 115Quiz - Exporting
116What’s Next After Your Photoshop Advanced Course
01:05 117Final Quiz
Lesson Info
3 Kinds of File Export for Photoshop Social Media Web & Print
Hi there, this video is all about exporting our files. We're gonna look at three use cases, we do social media will do web and we'll do print, we've covered some of these in kind of specific areas. But I want to condense it down into one kind of usable video just so you know, these are the definitive rules for exporting the different formats all in one handy place. So social media first, we'll look at just doing a single document plus a multiple art board export. So this one here, easiest way and best way is file export and no, not file export file save as because what we want is a J Peg. So we're using just a regular old Jpeg, not a safer web because social media doesn't need to be condensed and the data pulled out to make the file size smaller, we just want a really good looking image. I'm gonna put it on the desktop. I'm going to put it in a folder called export. This one's gonna be called grow, This is gonna be July 19. Let's save quality slider because we aren't worried, we're goi...
ng up to facebook, facebook twitter instagram, they'll do the image resizing. We don't want to do it for them. If you're uploading 1000 of these, you probably want to keep the file size a little smaller. But jpeg like that is a really good quality and it's going to be ready to go, let's say you've worked on something that has multiple outboards. So we want to export these for our different social media platforms. So we need to do is go to file and we're going to use this export option. What we want is export to files. Put them all in my this stock folder called export click open. This is going to be my illustrator course and you can decide on the format. It's going to be a Jpeg and the quality sliders at eight run I could drag it up to 10. Successful. And now on my desktop I have in the export folder you can see there. Okay, I it's got my illustrated course. It's taking the rest of the file name from your art board name. So just make sure you're naming your outboard something that you want the file to be. All right. Let's move on to print exports the nice simple one. Switch one here, let's say this thing we've made it, we've fixed it, it needs to go out to a poster or a printer. What kind of file format should I use? The most versatile is file save theirs and in here you're going to use, you can see in PST s just leave them as they are. The file sizes are quite big. So what we're going to use is the Photoshop pdf method. The cool thing about that, if there is text or vector graphics, it will be retained inside this pdf plus the file size is really small and quite interchangeable in a format that is expected I guess it's easily emailed. Let's put it on my desktop, You can see I've got to export folders just to mess with everyone. This one here is going to be called Prince smoothie. Thank you very much. Okay, and in this pdf settings because it's going out to commercial print, just pick high quality print and just turn that off. Why? Because that's going to basically just make a pdf with this turned on, basically all you have is a PSD super big, fully editable. All the layers, but it's just called a pdf can cause problems with printing rips. Makes the file size super huge. We just don't need all this kind of malaya masks and things. Now we're sending it to the printer, they don't need that stuff so we can turn it off, then click save as and if we check it in my export files there, he is there 2.2 MB or is this actual file here is about 50 MB. Let's do the last one. Let's do web design. So in your exercise files, if you want to play along in 17 exporting, I've got this web designer example, I've got a slightly different version that we've been using before. So it's kind of two ways. Let's say I like this graphic here, I'm gonna make my latest pal nice and big so you can see it. Okay, so I've got this thing called image books layer. I'm going to right click it and just say export as well. You can use the quick export. That's the quick way of just getting a single layer out. Okay, and that's doing it one at a time so I can decide I want to be a PNG no, jpeg. Do I want it to be 70% like, like export? So that's one at a time, which is quite cool, but if you want to do lots of them, we're going to use adobe generate. So we're gonna take it even further than we did earlier in the course. So file, let's make sure that generate image assets is on. Actually, I'm gonna save my document somewhere, make it easy to see. I'm going to say that you don't have to do this, but I was going to make a folder on my desktop called generate and I'm going to pop this in. Cool, so the way generate works is it looks to wherever you've saved the PSD there is, there is an affordable generate. When you turn this on file, generate, Image assets, nothing really happens except you get this kind of folder that's where it's going to stick all our images. So let's say this background graphic here. I want to save this out as a dot jpeg magically in my Image assets. There is my Jpeg. Okay, and I can work my way through and say actually I want that to be a jpeg as well. Image books, you're going as a jpeg, But I want to take it a bit further. What I'd like to do is I want this to be a really low quality version but at least I know that it looks good at 40%. You just take 40% of the end and it has to be this syntax okay, can't have other spaces. It has to be dot j p G And then straight into the 40%. The cool thing about that is it will do image books at a 40% quality. Let's do it at 10%. So you can really see that it's actually doing what I say, it's regenerated it and you can see it's pretty pixelated So you might be happy that this one is at 40 but this one here because it's background we can get away with like I don't know 30% the lower. Now this syntax we're going to cover quite a bit in this course and it's hard to remember the syntax. Okay what has to go where? So if you google, adobe, Photoshop layer syntax, you'll end up here. Okay. It's the top results, adobe help dot com And here is the big long version. I'm going to give you the skinny version but it has all the syntax written out in here before you finish the syntax. What I want to do is let you know that you can export groups because at the moment I've got this graphic and this graphic, they're two separate graphics so I could name them but they'd come out separately so I can slip both of them have a group name, this group logo dot PNG And let's say I wanted to be an eight bit or a bit or a 32 bit PNG. Okay you can just add that there as well, we'll just leave it as a normal PNG which is a bit and hopefully hear that group gets exported now if we check you can see mine's not appearing sometimes this happens sometimes you just need to turn generate off and back on again. There's my logo, leave that in there. It's an issue that I had. You'll probably run into it as well and you can see I guess the thing I want to show you is that can you see a group them together to just name the group. So let's look at some different syntax. Just know that you can do three of them, you can do PNG, you can do gift and you can do jpeg you can see there's my gift there. What else can you do? Let's say you're doing responsive design and you need a couple of versions of this background. Okay so um let's get rid of the 30%. Let's just try and keep it clean. So I got bricks But I want a smaller version, I want a 50%, goes at the beginning with a space. What it'll do is it'll generate whatever sizes in the document, half sized version. So we gotta bricks there is there now it is, how big is it? This one here is 603 that's half of what it is in this document. But often when you're doing response of what you want is you want a comma, you want two of them. So I'm going to copy this, you could put 100% in but you don't really need that. So a comma and a space. And what you need to do is these need different names because we're going to create two files. Now the comma means making two versions of this. This one is going to be my maybe at two X. Or maybe this one is just number two or her is So once a 50% ones just normal and hopefully now I have got to look close it down there's bricks, it's bricks high. Res you might be using the at times to suffix, you can add that there too. So that's re sizing it. Let's look at another way of re sizing it. So instead of doing 50% you can actually say I would like it to be let's say 200 boxes across space X. Space. So 200 times and let's say you know you need it to be 200 width but you're not too sure how high it is just like make it whatever height it is proportionately So 200 wide and if you use question mark, you have to use the lower case X. You have to use all these spaces. It will guess the hype for you. So now in here I'm going to have a bricks that is 200 pixels wide. Okay, copy that. I'm going to have another one that is 500 pixels wide. This one is going to be called maybe 500. Hopefully. Now I got my syntax right? There's a version and there's a 500 version. Go on now let's say you want to take that to another level. Okay, because you need a high res and low res you don't want to have to be copying and pasting and changing the names. So what we're gonna do is just going to call him brooks. Mm bricks even man, Is that bricks having a bad day which is the regular day. Anyway, we've got bricks and let's do a few other ones. We've got that one. So image books is done. Let's do some of these PNG So there's my icon for print. This is going to be dot PNG this one here is going to be my app dot PNG. These are all going to be dot PNG totally name your layers as you go. So we could go through all of these. Right? So we've named all the layers. Adobe is generating them all as we go. There's my icons But let's say I need two versions. I need a high res and low rez you might need uh 50% 100% 203 100 for all the different mobile phones or media queries. So what you can do is make a new layer. It doesn't matter where it is. I'm going to put mine to the top of my group here so it's easy to find and you have to use this syntax, you have to say default Hi res you don't have to say Hi res, you can call this that this is naming your folders. Whatever you say here could be the dan folder. I'm going to create a folder called Hi res. It knows it's a folder because you put a forward slash just in front of it. I have to say default have to put a forward slash straight afterwards and let's look what happens. It's the blank layer Photoshop gives. I'm going to put all them into this default folder for you which is not that exciting until you put two of them in here. So you put a little plus and you have a low reservation. Everybody needs a little slash at the end To say I've got two folders. And the trouble now is there's nothing different about these two Genered two folders but they're exactly the same. Exactly the same size. So what we can do this low res folder here. Okay, Remember when we did our scaling earlier, we put 50% in front of it. It's the same here. I want everything in this folder to be 50% the size. Alright we're there. Let's have a look now so you can see bricks hold it smaller than the bigger bricks go on. If you want to get even more nerdy you're like there's no way to get more nerdy than that. Okay you can say straight up to here is I want you to append it with the at two X which is really common in web design and mobile design as an indicator for the high res version. So now I've got all these at two X files Now. Don't worry if you're like that blew my mind. He went far too fast. All you need to do is type it out once and just do what I do like I can never remember that all of my heart, I just opened up a previous file that I've worked on. I copy it out and I paste it into this or I just go to the I just google layer syntax for Photoshop and you can kind of pull it from the adobe web site. Alright. We've got a bit nerdy there at the end but I hope you can see especially if you are a regular web designer, you need to get assets out for either yourself building websites or for your developer. It's really good now, especially if you're making amends, you go through and say actually this thing here needed to be switched out to a different color. And I've got my bricks at times too. And I've got my smaller version now, all ready to go super quick. Super easy. You just gotta put that kind of initial effort in. All right. That ends nice lengthy exporting files from Photoshop. Hope you learn something new. Let's get on to the next video.
Class Materials
Ratings and Reviews
Shah Nawaz
Amazing experience but it is little old. You should update with latest version of PS
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 Classes
Adobe Photoshop