I was surfing around, looking at Photoshop tutorials, when I came across this website and just held my breath in awe of its simple beauty- Anne’s Design (www.annesdesign.net) - and decided that I would just *have* to make a tutorial on creating a simple, soft site based on this one. (BASED ON – I don’t do rips, and feel that anyone who has to out-and-out rip a website has no real talent, or they would adapt the awesome layout to their own needs and do it themselves.)
A longer tutorial, you may want to visit this one in pieces - or, get it much more in-depth, with a ton of tools from the PhotoSHOP page and perform your soft site design without having to sit online to do it.
Blocking It Out
Our first step is to “block” the layout, indicating the basic components.
1. Open a new canvas in Photoshop, about 600x600 pixels (or larger, if you want to work at a high quality and compress the size downward, maintaining a great image quality). Make the background of the canvas white.
2. We’re going to create a background pattern that is simple but can be re-used throughout the tables in our site. To do this, you’ll need “Manu’s Dot”, a pattern that can be loaded in any version of Photoshop. Grab it here or in the Photoshop plugins portion of this site. Next, create a new layer (Layer, New, Layer). Then, select, “Edit, Fill” and choose “Pattern”, then grab Manu’s Dot from the drop-down menu. You’ll end up with a patterned background that looks just like the one on IDZine.
3. Now for the really easy part. Grab your rectangle tool and begin constructing the basic shapes of the site, as I’ve done below:
4. Now, you can see exactly what “shape” your layout will take, and can start “filling in” the space.
Filling It In
1. You’ll need an image of a flower or flowers to continue, or you can grab the one I’m using from below (Right-click and choose "Save As..."). Keep in mind that the color contained in these flowers will dictate the colors of your palette for the site.
2. Place the image you choose within the “header” (the very top block) of your layout and arrange the color of this block to correspond with the image, blending any rough edges (one or two spots where the image is cropped won’t make a huge difference, but try to keep as much “uncut” area toward the inside of the banner as possible).
3. One of the really eye-catching elements of AD’s banner is the artfully rendered crystal balls placed here and there, to give the banner depth. We’re going to borrow this idea, but grab a shape tool like butterflies to add depth and interest to the banner, even before we get to our text. Make sure to vary the size of your shapes, and relate the shape you choose to the image you used.
4. Within graphics, we have the freedom to use any type of font we want to – it won’t matter whether someone else’s computer supports the font, because it’s embedded into the image. Consequently, you can take some time to find a font that really reflects the tone of your site. Use this font to write your site name, but any tag-line text or URL info should be in a clean font like Verdana or a pixel font like Hooge. Make sure that the colors you use compliment the colors present in your banner.
5. More text will come with the creation of our navigation bar – but first, we need to indicate how we want the body to actually look. Use your rectangle tool to indicate cells and boxes, which will make it easier to create within your html editor.
6. The “indicators” I have used for my layout tables can actually be used as a background that will imitate the clean-ness of CSS without the need to know CSS coding. To create yours like this, make the blocks that you want in a dark shade of your main color. Then, select the block and choose “Select, Modify, Contract” and enter “1” in the dialogue. With the selection made, choose a lighter shade, or white, and fill the selection. That’s all you need to do until we begin “cutting”.
Navigation
The navigation in this tutorial is the one concession I will give to completely emulating AD’s layout- insofar as I love the mirror effect she chose to use, we’re going to create the same effect with our own navigation bar.
I’m not, however, going to go through the whole process of creating a navigation bar, just the mirror. If you don’t know how to create a navigation bar, take a minute to read one of our button tutorials or get the Soft Site Design Pack, which lists the process to make her navigation bar itself.
1. Load your navigation bar layout in Photoshop (or, like I did, just create one right inside your current layout).
2. Place the navigation bar in your layout, if you haven’t created it inside the layout.
3. Right-click the navigation bar layer and choose “Duplicate Layer”.
4. Click “Edit, Transform, Flip Vertical”.
5. Move the duplicate layer so that it mirrors the original.
6. Move the opacity slider of the duplicate layer down, until it looks … well, less visible than the original layer. (My opacity dropped to 38%)
Cutting It Up
Our last step before jumping into the html editor (which I’m not going to cover, simply because there are too many editors and too many tutorials on how to insert graphics into them… but you can download the .zip which contains my own html and layout tables)… is to cut the layout into manage-able pieces.
1. Look at the layout and decide which areas stand out to you as being whole and separate.
2. Merge all the layers (Layer, Merge Visible).
3. Using the “separate” areas that you have decided on, use the rectangular marquee tool to cut each individual section and paste it onto its own layer. Below is a diagram that shows how I have decided to cut mine apart- the red lines indicate “separate” areas.
4. And that’s really all there is to it… on this end. Plug each section into a layout table within your html editor, add your text… and you’re off!
Download psd source file here.
Download html .zip here, which contains all elements to this layout (excluding the psd source file) or Get the Soft Site Design Pack here.
Copyright (c) 2005-07, Lolaness of My-Photoshop.com, All Rights Reserved Please contact for Reprint Information
|
