Photoshop is not only for photographers and photo editors. It's also used to create graphics for web, social media, print, and much more. In this video, you'll see how to combine photos, graphics, and type together in a design.
Video Transcription
Photoshop is not only for photographers and photo editors; it's also used by designers to create graphics for web, social media, print, and much more. Let's see how to combine photos, type, and graphics together in a design. To create a new file, I can click the Create New button or go up to File > New. There are various preset sizes for different document sizes, but they don't have a social media one. We will actually want to create a Facebook post in this case, so we'll have to type in the size that we want.
The concepts we cover in this exercise are applicable whether we're creating a social media post, for print, for web, etc. The differences would be in the size that we would be creating and the color mode that we'd be working on for anything that's going to be on screen, such as web graphics and social media video graphics. The recommended Facebook post size is 1200 by 630 pixels. What matters for things that are on screen like social media graphics is not the resolution, but width and height. We need enough pixels and it needs to be RGB color as opposed to CMYK.
To add a photo, I can open the photo up that I want to add to this and copy and paste it. If it's a background layer, I can either unlock it or select all and copy and paste it. I have to be very careful when I do my free transform because this document does have a set resolution and when I transform it, it's going to recalculate this image at that resolution. I don't want to scale it down too small and then make it bigger because it will look horrible. Instead of copy and pasting, I want to place the image in, as it will maintain the original resolution of the image. It's easier to choose Place Embedded, as that will embed the file directly into my Photoshop file.
We're going to keep it simple. We're going to place a copy of the image into this Photoshop file, so my original file will stay on my computer. It'll make a smart object, and it'll automatically scale it down to fit my file. At the top, I can see the width and height is 15.6 percent of the original size.
That is something to watch because 100 is the normal size, and you don't want to go beyond 100 or at least not much, because the bigger you go beyond 100 percent, you're enlarging the pixels and it won't look very good. Make sure the link is checked between the width and height so it is resizing proportionally. If you hold shift, it'll do the opposite of whatever is selected. If I leave it checked, which is the default, I don't have to hold shift.
I can resize and it's good. I want this to fall off the edges a little bit. Zoom out a couple of times and make it bigger. If it goes too far off the canvas, hold shift to maintain the aspect ratio. When you're resizing this, make sure the link is checked so it is resizing proportionally. It doesn't matter whether you're grabbing a corner or the bottom or the right for sizing it. Double click on the image to accept that sizing.
Now, I can go back and edit it if I ever want to. Behind the scenes, it has embedded the full high-res JPEG into the document so I can size it over and over again without loss of quality.
Let me delete this layer by clicking the trash can there to get rid of it because I didn't want that; that was just to show you the difference in the icons. All right, so now I want to bring in a vector graphic; that was a pixel-based graphic, but I want to bring in a vector-based graphic from Illustrator. So, Photoshop is made of these little pixels that, when you zoom in, they're little square blocks. Photoshop is a vector-based program and there are no pixels; in vector-based graphics, it's just perfectly crisp, clean lines. So, logos are created in Illustrator, saved as vector graphics as Adobe Illustrator files. I have one of those that I want to bring in; so, the client gave us their logo that we want to bring in - that logo. So, again, I'm going to do Place Embedded and I'm going to choose that Illustrator file. It could also be an EPS file; some people will give you their logos in EPS (Encapsulated Post Script) file that is also a vector file as well that would be okay to bring in. Sometimes also it's a SVG file that would also be okay to bring in. But, in this case, it's an AI (Adobe Illustrator) file. I'm going to place that in. Now, you can just keep the default options here, but notice it's going to bring it in as a smart object - in this case, a vector smart object.
All right, so here it is, the link is still checked up there, so as I resize this it would be resizing proportionally, and this is about the size we want it to be. I'm not going to make it too much bigger here now. Oh, let's just talk about that: we can make vector graphics as big as we want because they're vector; they're crisp, clean, not made of pixels, so you can make these as big as you want; they can be ten thousand percent in size and you will never lose quality. That's the beauty of vector graphics: you can resize them endlessly with no loss of quality - you can make them as big as you want, and that's why logos are created as vector graphics, so you can make them any size you want. So, you don't have to limit yourself to 100 or smaller for vector graphics - that's only for pixel-based graphics, which are limited. Vector-based graphics, you can make them as big or as small as you want.
All right, now I want to bring it; I want to make some text. So, I will use my type tool over here in my toolbar - I'll click on my Text Tool and up here are my font and my size. And I want to center this text, so I'm going to choose Center here. I can come back in and set the other settings later, but I do know that I want to get centered right away, so that I can kind of click right here and be centered on that.
So, I'm going to click up top here and type in "Labor Day Sale." And it's quite small, so I can either drag over this, or once I'm in there I can say "Select All" to get all the text, and I want to make this text bigger. So, I can come up here to my type size.
Now, you can choose type sizes from the menu, and when you're creating your text, by the way, I don't know if it's going to start out small or big; it uses the same settings as your previous text. So, if you previously did something very large, it's possible your text could start out very large; you could have a different font, so it might be something different. But, you can go into the menu here; you can choose a size, but a quicker way - actually, just a little tip here - instead of going to the menu and like choosing a size, which is limited, like 36 to 48, you can drag over the icon. So, when you hover over one of these icons, you see a hand with two arrows and you can click and then hold and drag and it will increase or decrease that value, and this works throughout most things in Photoshop that if you see an icon or a label like a text label or an icon, you can actually drag left and right on that label to change that setting, which is pretty cool.
All right, then we can set our font. So, we can go over here and choose our font. So, as you scroll over these font names, you will see previews over there on the right, as long as your text is selected, which is quite nice. So, you can see what these things look like. If you know the name of the font that you're looking for, you can click into that field and start typing. So, I actually want in this case, Helvetica, so I'm going to start typing in "Helvetica," and then you can see all the different versions of Helvetica, and I think I want this regular version right here. So, I will choose that.
When I switch to the Move Tool here, I can go ahead and I can move this up or down. As far as aiming with this Move Tool, you have to be careful whether Auto Select is turned on or not. Auto Select is turned on by default, and that means that you have to click and aim right at the thing that you want to move, which does make selecting different things easier because I can aim at the logo and just drag on the logo to move the logo.
I can drag on the text to move it. With text, you can click in the middle, but with a vector logo, I'd have to grab right on it to move it. If you find it hard to aim, you can uncheck auto-select and then select the layer in the Layers panel. Then you can drag it anywhere in the document. Always pay attention to the Layers panel and what's selected while you work, as it will affect the selected layer.
I'm going to zoom in and switch to a different type of anti-aliasing. Anti-aliasing is the smoothing of edge pixels, and there are different qualities of anti-aliasing, which are algorithms for how it's going to make the text look. For web graphics like this, which will be posted as a pixel-based image, the Mac LCD is useful for web designers.
I'm going to make the text bigger, and I can use the Move tool to move it into position. Using my Type tool, I can go back and highlight the lines and show some additional options in the Character and Paragraph panels.
Click on that button or go to the Window and choose Character. This will show the Character panel. If the panel is covering, you can pull the panel off and close the Paragraph panel. The buttons here will open or close the panel. You can drag the panels around and dock them into one of the columns.
To adjust the space between the lines, use the icon for leading to increase or decrease the leading. To align all of these items, select one, shift-click on another, and click Align Horizontal Centers. To move the Free Brush up, select it in the Layers panel and hold shift as you drag it up. To change the color, click the box and bring up the color picker. You can also come into the document and click on different colors. Use the Move tool and the arrow keys to nudge things. For the final file, save it as a Photoshop file. To upload it to a social media platform, export it as a high quality JPEG.
Continue learning more Adobe Photoshop in our NYC Photoshop classes. For those outside New York, find and compare the best Photoshop classes near you or live online Photoshop classes.