Ps: [ Pixel Stretch ] By Dreamstar7

[Equilibrium Dreams]

Pixel stretch is a rather simple way to create a background for a layout. It may look rather retarded at times because it's too abrupt or it's not done right. I'm going to show you how to do pixel stretch, and how to make it not look retarded.

I will be using this image, font at [Only registered and activated users can see links. ] (sized down for this tutorial):


[1] First, open up the image in Photoshop. Hit ctr+a, then ctr+c to select the entire image and copy it. Open up a new document. It doesn't really matter what color the background is, because we'll be filling it in later on with our own background color. Make a new layer (ctr+shift+n) and paste your image (ctr+v).

You should now have two layers: one with your image, and another that's white/black/transparent.


[2] Go image >> canvas size and make the canvas at least 100px taller in height. MAKE SURE THAT THE IMAGE IS ANCHORED AT THE TOP. See screenshot if you don't understand.



See the little area with eight tan cubes, one white cube, and five arrows? Make sure your canvas resize window looks exactly like that.

[3] In your toolbar, right click on the marquee tool and select the single row marquee tool.


This little tool allows us to make a selection that is only one pixel high and spans the width of the image. Make sure you're on your image layer. Click on the part of the image which you'd like to be the background. It can be anywhere on the image. I prefer to use the very last row on the image.



Now hit ctr+c to copy. Deselect (ctr+d)

[4] Make a new layer and hit ctr+v to paste. You should see a little strip that doesn't fit in with the rest of the image. We're going to free transform that little strip. Make sure you're on the third layer and go edit >> free transform or hit ctr+t. It should now look kinda like this:



Hover over the strip until you see a double-sided arrow pointing up and down, like the north-south resize cursor. Click and drag it all the way up to the top. Then go back and click and drag the same part all the way down to the bottom. Hit enter to commit. Your image should now look something like this:



Yes, I realize it looks extremely odd. No, I'm not insane. We're not done yet, so read on, kiddies.

[5] Move the top layer under your main image, like this:



A lot of people who try pixel stretch stop here. Which makes the image (and later on, the layout) look really retarded. We're going to make it look better. Hopefully, a lot better.

Go to your very bottom layer. Using the eyedropper tool, choose a color on your main image that takes up the majority of the background (of the main image). This will be your background color. Fill in the background with your new background color. In my case, it'll be white.



[6] Now for the blending. Go back to your main image layer. Press D to reset your colors and, in the toolbar, take your gradient tool (right click on the paint bucket tool if you don't see it).

Now, at the bottom of the layers pallette, there's a little rectangle with a circle in it. Click on that. It will add a layer mask to the layer.



Your layers pallette should now look like this:


With your gradient tool, make a gradient from just below the bottom of your main image to where you want the gradient to stop. (Hold shift while making the gradient to make it stragiht.) This will blend your image and the background together, so that it looks nicer. It's like regular blending. It should now look something like this:



[6] (OPTIONAL) Okay! Now for the (slightly) tricky part. If there are areas of the image you find weird, where you either see too much of the main image or too much of the background, here's a trick you can use. Take your brush tool and brush it over the part you don't like. Make sure you're still in the layer mask. If you brush over the image with black, you'll make that part of the image more transparent. If you brush over the image with white, you'll make that part of the image more opaque.

For me, the left part of her dress looks a little odd. See?



I want to make that bit of white of the pixel stretch disappear. So I brushed it over with white on the layer mask. See the difference?



[7] (OPTIONAL) If your pixel stretch has certain areas that are visibly lighter or darker than other areas, you might want to get rid of it so that the text on your layout will be easy to read all around.

For me, I want to get rid of the yellow near the right.



Take the magic wand tool. Make sure you're on the pixel stretch layer. Select areas of the pixel stretch that are either lighter or darker than the rest of the pixel stretch.



Use the eyedropper tool to select one of the more common colors in the pixel stretch. Fill in the selection with that color. You can either use the fill bucket tool or, with the marquee tool, right click and choose Fill >> foreground color.



My image now looks like this:



That's it! You can add text, effects, or anything else to make it look nice. If you want, you can lower the opacity of the pixel stretch layer so that the blog will be easier to read.

This is my final work:



Yeah, yeah, I know. Rather simple for a layout. Keep in mind this is just a tutorial, and I'm not going to code it or anything. It's for the purpose of showing you how to do pixel stretch. Have fun, and if you have any questions, please don't hesitate to ask.

tutorial copyright dreamstar7 @ blogring.net

<div align="center">
ONLY POST IF YOU HAVE A QUESTION OR SUGGESTIONS IN ADDITION TO THE TUTORIAL.</div>

[imported_KRYXTi3]

Originally posted by tails_n_amy1121@Sep 3, 11:39 AM
can you give us a tutorial for arcsoft PhotoImpression instead of always photoshop??? not all of us have it, you know :huh: !!

errr ... not alot people are familar with photoimpression nor know what it is ... =.=

anyways .. great tutorial =D i should try it

wait so the pixels that stretch down are the thing-ers that are ganna separate the blogs and modules right? or can you just make your own it would still look nice... what do you recommend?

[xYunaxFantasiesXP]

Please do not double post. Either way is fine but I prefer a sperate one.