Photoshop Wednesday

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!

Related Posts Plugin for WordPress, Blogger...
April 25, 2012 / Photoshop Tutorials / LEAVE A COMMENT / 9

9 comments

  • AHH! I love that you did this and it was so easy to follow along. I’m going to practice this very soon. Thank you thank you

  • Thank you so much Erin! You’re such a jewel : ) you are a great teacher, everything was explained very well. I’m off to practice and I’ll let you know how it goes!

  • You are a clever lady :-) Perhaps I will find a use for your photoshop tips some day. I think I told you that I’d downloaded the 30 day trial version from the Adobe site last week. Nope, I haven’t used it yet, all I’ve succeeded in doing is slowing down my operating system. I’m blaming PS but it might be the Lion I downloaded a couple of days prior, lol :-)

  • Right. Firstly where is that outfit from,.the third one? I LOVE it! I’ve just bought some boyfriend jeans and am taking it a bit too literally, wearing it with a tshirt and flipflops. I know I need to glam it up and that outfit is lovely! (You could do a post on what to wear with boyfriend jeans if you like!).

    Great photoshop tutorial. I agree, set the image size as the first thing and set the width to the width of your blog. BUT, I learnt the most awesome tip in blogshop. (Clearly I still haven’t got round to blogging any photoshop tutorials yet)

    So here’s is the easiest way to change the canvas size. Select the crop tool and select the whole image. Then, use the markers and the edges to draw the size bigger. So simple! I do this, keeping it too long, and then crop it smaller once I’ve done.

    Great tutorial Erin.

  • Erin, you’re AWESOME! These tutorials are so splendid! You totally absolutely need a sidebar with a link to your tutorials. Please and thank you. xoxoxo

  • I don’t have photoshop and it makes me sweat with nervousness when I think of how overwhelming it is to learn! Such a skill you have there…

  • OH, Erin, thank you so much! Now I will be able to create my next Mini-View post in PS. I’m really excited about this fact. I have to admit that I’m still using Pages (too much) because it’s the program I’m most comfortable with. I should just bite the bullet and take a PS course. Once I have the basics down, I know I will use it more.
    Erin, I don’t know how much work is involved, but you should add a category for the PS tutorials in your side bar. I tell you, people are needing and wanting this information. As more and more people start to use layouts and such to spruce up their blog, your tutorials are a great resource. Just my .02 ;)

  • Great tutorial Erin! But I have one more question, how did you do the squiggly arrow? If I try that free hand my arrow looks like I’ve held a pen in my hand for the first time ;)

    Like Annie I love the third outfit. Need that blouse!

  • Great tutorial. You’re so good at this you need to defo put PS tutorial in categories…

    Also use CS5 and do it the same way, although usually keep to same format and don’t masque out….

    You could have weekly/monthly tutorial and eventually run your own seminar like blogshop. You’d be great at that…:)