Just when I’m getting nervous and think I have nothing to write about, something perfect falls into my lap. I got an email last night from Theresa and Tori (hi lovelies!) with a Photoshop question. It’s been a while since my last Photoshop tutorial, and with nothing on the schedule for today it seemed like the perfect opportunity to tackle it.
Theresa and Tori were both curious how to create long, scrolling layouts in Photoshop. You know, ones that don’t fit entirely on the screen, that you have to keep scrolling down to see the rest of. A perfectly legitimate question! The way Theresa explained she was going about it now seemed far too circuitous, and it’s so easy to do in Photoshop. In fact, determining the size of your layout is actually the first thing you do in Photoshop.
Let’s start by opening up Photoshop. I’m working in CS5 but these steps are all the same in Elements and previous versions of CS. Once you have Photoshop open, select File, New from your top menu. This will create a blank canvas for you to work with.
A dialogue box will pop up, giving you the option to name your document, select the canvas size and background color. For Friday Fives, I create documents that are 625px wide by 600px wide, because they fit nicely on the screen. Theresa and Tori both wanted to know how to make images that are longer than the screen can display at once, so we’re going to enter a height in pixels of 850 (make sure you’re working in pixels, not inches or anything!). You could put 1000, or 1250, or even 2000px if you wanted, just know you’re going to get a very long, very skinny document with a large file size the larger you make it. 850-1000px in height is approximately 11-13″ long.
Hit OK. There she is. Your extra long document, ready to be added-to and decorated for a scroll-able layout.
It’s just that easy! If you want it longer, you can make it longer. This is helpful to know in case you’re halfway through a layout and realize you need more space. Just select Image from the top menu, and then Canvas Size.
You’ll have the option in the dialogue box that pops up to change the height or width of the document. Use the anchor arrows at the bottom of the dialogue box to select which direction you’d like to add (or remove) pixels to.
But it occurred to me that the canvas is useless unless you know how to add things to it. So we’re going to add a few things to jazz it up. For our purposes, I found a picture of New York on Pinterest, and a few models from J. Crew. Open everything in Photoshop, and then select the Rectangular Marquee tool from your left tool bar.
Use the marquee tool to draw a bounding box around the first image you want to add to your canvas. Once you have it selected, copy it, and paste it onto the blank long document.
Repeat the process until all of your images are pasted onto the document.
Use the arrow tool on your left tool bar to move and arrange your images. You can resize them to fit by holding down the shift key and dragging the corners. Holding shift retains their original proportions so nothing gets all stretched out or squeezed-looking. As you can see, I placed the models at the bottom of the canvas, and the picture of New York at the top.
I’m about to use the word “layer” like 16 times, just a head’s up. You can add text (the T tool on your left tool bar) or finish your layout however you want. Each individual image or text box you placed on your canvas is its own layer. Your Layers panel to the right will show all the separate layers (if you don’t have a Layers panel, select Window from the top menu bar, and click “Layers”). When you’re ready to save, you’ll want to Flatten all the layers by selecting Layer from the top menu bar, and then “Flatten Image” at the very bottom.
You’ll notice that instead of 3 separate layers, there is just one layer with all the merged elements. At this point you won’t be able to move individual images within your layout anymore.
Now you’re ready to save your layout! Under File on your top menu bar, select Save For Web & Devices to name your image and select the format you want to save it as. Using this method creates a saved image that is more compressed and therefore easier to load on websites. I usually save one copy with all the layers as a Photoshop file (.psd, before I select “Flatten Image”) so I can go back and make any changes, and one copy as a flattened jpg. The Save For Web & Devices dialogue box has a lot of options where you can pick the image format, image quality, and will show you the output size based on your selections.
And there you have it! I hope this helps, ladies. If I’ve thoroughly confused you and you’re steaming with frustration, let me know! I’m happy to answer any questions or clear anything up. I’m probably not the best teacher with this stuff because I’m too comfortable working in Photoshop and I tend to assume things are obvious when they really aren’t.
Anyone else have any Photoshop questions? Ask away!