Making a layout (obsolete)
(attn) This tutorial is old! Totally out of date. Check new version.
This is the first part of the tutorial, the designing part. I divided this tutorial into 3 parts: designing, slicing and saving and coding (coding part is too out of date). Of course, reading this doesn't mean you will be able to make a gorgeous layout! [ Besides, the layout we're making isn't that...pretty. :( ] It's just some methods, tips and organization. :) Well, you can click on some thumbnails to enlarge them and see some notes.
It's optional but sometimes, inspiration may come while you're not on your comp. If you don't want to lose your idea, I suggest you to draw the layout first. Then, you will just have to reproduce it once you're on your graphic editor, it's exactly like a sketch.
Don't forget to choose the colors you will use... Use a colorwheel or a color generator. :)
You will also have to choose the images you will use this one featuring Haruko from FLCL.
So, you are now ready... Open a new document in Photoshop. (Ctrl + N) I will set the width to 800 px and the height to 600 px. Fill the layer in white with the paint bucket tool (G) 
Take the selection tool (M) 
and select like in the image (selection size: 800*450).
Make a new layer (Shift + Ctrl + N) or click here 
on the layers window. Fill the selection with a color (#9A9FB3). Then, you can deselect it.
Take the text tool (T) 
click anywhere on your doc and type { (Alt gr + 4). You can choose an other font and set a bigger size. Here I used the font Eurofurence light and set the size to 300 px. Repeat this step but this time, type } (Alt gr + +) Take the move tool (V) 
and drag the } next to { then click on the right arrow 
on your keyboard. It will move it to the right. When you think it's enough, stop.
Link the two layers and merge them. (Ctrl + E)
Double click on the { } layer. A layer style window will pop-up. Choose Color Overlay then choose a color (#727892) and click OK.
Make a new layer under the { } layer, it will be named layer 2. Select as below using the Selection Tool (M) and fill it with another color (#B6BBCE). Take the magic wand tool (W) 
In the toolbar options, check Anti-aliased, Contiguous, Use All Layers. Click on the rectangle you've just filled. Inverse the selection (Shift + Ctrl + I) or go to [ Select > Inverse ]
Make sure you're working on layer 2 then press DEL or go to [ Edit > Clear ] then deselect. Link layer 2 with the { } layer. (Then, if you have to move them, they will stay like that.)
Now, you will have to add the image. Open it. As you can see, the jpg quality isn't really good. Resize the picture. [ Image > Image Size ] The original one was 552*768px, I will change it to 359*500px.
Duplicate the layer [ Layer > Duplicate Layer ]. Go to [ Filter > Blur > Gaussian Blur ] and set the radius to 0,3px. Change the blending mode to Soft Light. Then, merge visible (Shift + Ctrl + E).
Now, drag your image into your layout. Click on the move tool (V) , click on your picture, drag it into your layout document. You can now close your original image. You will only work on your layout doc now.
Take the wand tool (W) Set the tolerance to 10 and check Anti-aliased, Contiguous. Click on the yellow part. Press shift and click on the other yellow part. (See the animation) You guessed it, you're going to extract the picture.
Now you have your selection. Press DEL or go to [ Edit > Clear ]. It's a bit ugly but don't worry.
Take the move tool (V) and move it to the left. Select your { } layer and move it to the right. Make sure it's linked with Layer 2.
Well, you see, this yellow on this blue/purple doesn't look really good so, double click on your image layer, select Color Overlay, pick one of the three colors, then set the blending mode to Color.
Duplicate your image layer. [ Layer > Duplicate Layer ] and put it under the original image layer. Let's name it Layer 3. Go to [ Filter > Distort > Wave ]. Set the generators to 20, the Wavelength to 15 / 52 and the Amplitude to 5 / 6. Press OK.
Right click on the Layer 3 and select Clear layer style. Go to [ Image > Adjustments > Desaturate ] (Shift + Ctrl + U) and set the layer blending mode to Overlay. Duplicate the Layer 3 several times and move the copies. Put them under { } layer and Layer 2.
Double click on the the { } layer. A window will pop-up, choose Stroke. Set the border to 2px, the color to white (#FFFFFF) and the blending mode to Overlay. Do this for Layer 2 too.
Then, you will have to add the title. Mine will be "Vespa Girl". Select the text tool (T) and click anywhere on the doc, then type your title. I chose the font Milky Well and the size 72px and the white color. Double click on your text layer, set the blending mode to Overlay and go to Stroke. Put a 2px border in this color #727892.
Take the magic wand tool (W) and return to Layer 1 (the background layer). Uncheck Anti-aliased and click on the purple part.
Click on Create new fill layer 
in the Layers window or go to [ Layer > New fill layer > Pattern ]. A window will pop up, I will use this pattern: 
. Put the layer right after the background layer. Set the blending mode to Soft Light and the opacity to 20%. Retake the wand tool, reselect the purple background, reclick on and I will use this pattern this time: 
. Retake the wand tool, reselect the purple background, reclick on and I will use this pattern this time: 
Click on Pattern Fill 2 and link it with Pattern Fill 3. Then, merge them together (Ctrl + E). Set the layer blending mode to Overlay and the opacity to 70%.
Click on your "Vespa Girl" text layer. Press Ctrl and at the same time, click on the layer to load the selection. Return to your Pattern Fill layer 2 then press DEL or go to [ Edit > Clear ].
Return to your background Layer 1 and take the magic wand tool (W) but this time, select the white parts. (Click on the top white part, then, press Shift and click on the bottom white part.)
Click on Create new fill layer in the Layers window or go to [ Layer > New fill layer > Pattern ]. A window will pop up, I will use this pattern: 
. Put the layer right after the background layer. Double click on it, go to Color Overlay, choose this color #D8DBE8. Then go to Stroke, set a 1px border using this color #727892.
Okay, it's almost over, now, you will just have to add the menu. Take the selection tool (M) Set the style to Fixed Size, set the width to 50px and the height to 50px. Click somewhere in your layout, a 50x50 selection box will appear. Drag it on your picture. Click on your image layer. Press Ctrl + C then Ctrl + V (copy & paste). Thus, a new layer is created, this new layer is the yellow thingie. Take the move tool (V) and drag it to the right.
Repeat the previous step several times. Now, you have four squares, link the layers together and merge them (Ctrl + E).
Double click on your layer, then select Drop Shadow. Set the blending mode to Overlay, the opacity to 100%, the color to white, the distance to 1px, the size to 0px and the angle to 120. Then select Color Overlay, set the blending mode to Color and choose the color #B1BFF4.
Voila! I guess it's finally over! Now, read the next part for slicing.
Sponsors
Leave a Comment
Works? Doesn't work? Other tips? Please leave a comment! :)