The Design Process
I’m going to use Adobe Photoshop to design the site. I haven’t ever used any other application so I can’t really say whether or not it’s the hands down best application to use, but it definitely is what most people use and I have no complaints about it. I’m using CS2 specifically for this but you can use pretty much any version, because I won’t be using any type of elaborate tools. In fact, I never do. So if you’re using a different application, it’s not a big deal, because chances are you will be able to follow along just fine. Just don’t use MS Paint ;).
I will be covering this design process as specific as possible, while attempting to explain everything in detail from the actual instructions, to the reasoning behind my different design decisions. So feel free to skip over areas where I’m rambling on and on.
Prepare your document
 | 1. Open up Adobe Photoshop. 2. Go to File / New on the top left menu. 3. Set the document width and height to 935x900. 4. Make sure resolution is 72 DPI. |
The site we’re going to be designing is going to fit within 1024 width resolutions. Most people use 1024x768 for screen resolutions but not everyone. It’s okay to go beyond 800x600 only if your target audience will be using (for the very large majority) at least a 1024x768 screen resolution. And since SiteVerdict.com is for webmasters, this is most definitely the case. Otherwise if you were to start a site for senior citizens, you definitely would want to design for a 800x600 resolution.
Now you probably asked yourself, “Why not just set the width to 1024?”. Because you have to consider that the scrollbar on the browser is taking up width, which it is. You can actually go higher than 935, but it’s just my personal preference to set it at around 935 px.
Step 2 : Fill the background, Set your guides, Expand
 | 1. Fill your background color (Paint bucket tool). I’m using color code: #f7f6f3 2. Maximize your window (I like having it fully maximized). 3. Go to View / New Guide (As shown to the left). Hit OK. 4. Repeat #3 and set the position to 5 in. 5. Then hover your mouse over the new guide, left click, drag it to the very right edge. |
 | 6. Go to Image / Canvas Size...
|
| Step 1 Explanation: | I knew coming into this design that that was the color I wanted to use. I like the very light beige / off white color. Generally however, I always just start off with white and then experiment from there. The background color you choose is very important. You generally want to stay away from darker background sites for *most* sites. If you’re after a really serious corporate site, or an ecommerce site where you’re selling something, it’s better to stick with lighter colors / white. |
| Step 2 Explanation: | Maximizing your document is really a matter of personal preference. But I really recommend you do it. It gives you a nice big open canvas without much outside interference. |
| Step 3 Explanation: | The reason we’re aligning 2 guides to the very left and very right of the document is to let us know what the maximum left & right extremes are. This lets us know *NOT* to design the actual content outside of these lines. |
| Step 6 Explanation: | This is the step which made step 3 come into play. We’re expanding the document further because it really lets you envision the design as it would appear on a fully maximized browser beyond a 1024x resolution. I personally design on a 1920x1200 resolution and I like to be able to see how the design looks with the full background to the left and right. |
Step 3 : Place your logo & let the games begin
I’m not going to be covering logo design here because I already wrote a very elaborate logo design tutorial which you can find here.
As you can see the logo I decided to place in the upper left corner just against the left guide. I chose to make it black just to see it with the most contrast against the background.
Now this is the point at which the *real* design process begins. This is where most of the thought and planning comes. You need to know what exactly the site is about, and the purpose / objective of the site. I really want this site to be both professional and retro’ish / designer’ish. It only makes sense because SiteVerdict is both a serious service (hence making it professional) but also geared towards creativity and design. My color scheme is going to be black and the shades of beige/brown.
Step 4 : Design the header
The header usually always consists of the logo, and the navigation. It’s what people are most familiar with and makes the most sense for this particular site because I want it to be easy to use and understand. If you were doing a personal portfolio design site or something, sure you can do something completely off the wall. But for this example, and most others, you will want to stick with the same formula of having your primary navigation and logo at the top.
I kind of want to give the same feel to SiteVerdict as I did this site (garysimon.net). Since they’re both my sites, and both in the same industry, it makes sense to kind of network them in a design sense. So I’m going to create a black bar that goes all the way across the entire width of the document at the top.
1. Select the square marquee tool. (The square dashed icon on the upper left corner of the tools menu on the left).
2. Left click and hold above the upper left corner of the document, and drag all the way across the top and slightly down then let go.
3. Select the paint bucket tool, and make sure black is selected in your foreground color and left click inside the square “marching ants”
Now I have just a random / unique idea that I want to incorporate. It will combine the logo into the black area, into a patch like rectangle that is half inside and half outside of the black strip.
 | 1. Select the square marquee and drag a square similar to the one on the left. 2. Use the paint bucket tool with black as the foreground and left click inside of the square selection. 3. Select the layer that the logo is on (assuming it’s a logo completely flattened to 1 layer), and go to image / adjustments / invert. 4. Place the logo layer to the top in the layers window and move (with the move tool) the logo inside of the square black area. |
 | In order to incorporate that side of “designer” / retro’ish, I’m going to scrape the black block we just added. 1. Select the eraser tool. Then in the brush options at the top, choose a brush and diameter similar to the one shown to the left.
Now that pretty much takes care of that side. Now we need to integrate the actual navigation and determine if we want it inside the black bar to the right, or beneath the black bar to the right. So actually I think what we’ll do is create a secondary strip that’s slightly darker than the background beige color that will go along the same height as the extended rectangle we added. |
The way you create that strip is the same way you created the black strip above it. Just first select the background color of the page with the eyedropper, click on the foreground, then change the color with the circular icon to slightly darker. Then use the marquee to make the strip, fill it in with the paint bucket tool. Make sure you place it on its own layer, and then position it *beneath* all of the other layers we created.
1. Select the paint brush tool and then select a brush similar to the one that you used to create the “scrape” effect. You should end up with something similar to the last image. | I figured this would give us some more of that designer’ish flavor by adding the rough bottom edges to the beige strip we just created. |
1. Select the Type Tool. | The next step is to add in the navigation. I just want it to be a simple HTML text navigation. And it is always important to choose none for anti alias in order to simulate real html text as it would appear in the browser. |
We could put a secondary navigation in the black strip above it if we wanted to but it’s not entirely necessary at this point. So that is the header. It’s very straight forward, but it also looks good and is easy to understand - which is what it’s all about.
Step 5 : Primary Content
After the header, you want to emphasize the most important aspect of your site, and generally to the *left* just beneath the header - because that’s where people look at first. They read from left to right. So with this idea in mind, I’m going to simply state exactly what this site is, or what the visitor should do, etc...
This is just standard text from the type tool, except “Smooth” is selected for anti-alias option. These are two different text layers. The top one “So you have a website? Post it” is one layer with the “Post it” bolded, and then of course the “Get your ..” is on its’ own layer as well. | As you can see I added a weird “wet” effect behind it. 1. Create a new layer in the layer’s window and place it underneath the two text layers. |
| The text I added to the right is simply 2 different text layers and they’re arial 14pt alias “none”. While the big text beneath it serves as the eye-catcher, this text will fill them in on exactly what this service is and how it works. That way, we completely take care of the whole “What is this site about?” aspect, which is one of the most important aspects to concern yourself with. People will leave if they don’t immediately understand. |
As seen to the right, I added a dashed rectangle. This will encase a secondary piece of content that I feel is most important. So now that I think about it, I think it would be a great place to feature the highest rated sites. Possibly a weekly awarded thing where 5 sites are recognized for having the best ratings. To the left we’ll position a “SiteVerdict.com Award” trophy emblem, and to the right we’ll list out the sites. It makes sense to feature this because visitors seeing the site for the first time will become motivated to reach that status. Motivating your visitors is huge if possible! | 1. Select the square marquee tool and a foreground color slightly darker than the background. |
1. Duplicate the logo layer(s). 5. Find a picture of a trophy somewhere and vector trace it with the pen tool to create an image similar to the one in the image above. | Vector tracing is what is being shown to the very right. You find an image, and trace over it with the pen tool. I cover vector tracing in depth in my logo design tutorial. |
As seen to the right, I added several things. First, to “encompass” and show off the trophy more, I added a white glow appearance behind it. This is just an extra step to draw some attention and notoriety to it. The middle dividing line to the right of it helps separate the “left” from the “right”, which is the site listings. And the site listings themselves are straight forward, the stars represent the rating of each site. Easy to understand and easy to read. | 1. Select the paintbrush with a large feathered (the soft circular brush near the top of the brush list). 4. Select the line tool (left click and hold the square icon in the tools palette and drag to get the line tool.). 9. Either manually create a star with the pen tool, or vector trace one from an image you find on the internet. |
As seen here, I added two more text layers. “Featured sites seeking reviews”, which made most sense to me. It allows me to list either the latest sites added that need reviews, or “featured” sites that could perhaps pay for an upgraded listing to get on the front page, or list sites that are pending but have few reviews. Sticking it right in the middle of the page gives it good importance which is what I want.
Then, I have “Browse Sites” aligned direction underneath the beige box above it. Notice how I align the beginning of the text, perfectly to the beginning of the box. This gives the layout structure and flow. It makes it very easy to understand and read. It also makes good sense to put it there to the right, because although it’s important, it’s not as important as any of the other 3 pieces of primary content to the left and above it.
1. Select the square marquee tool | 1. Screenshot an image of a site in your browser. 2. Select the square marquee and draw it out inside of the box we created. 3. Go to “edit / paste into” then “edit / free transform”. 4. Hold shift and scale it down as shown above. 5. Right click on the layer and hit apply layer mask. 6. Select the eras or and choose a hard smaller sized brush (at the top) and round off the corners as shown above. | I added 3 different text layers here. The top one is font-size 12pt bold. The “Review me (8)” is 11px. Select The 8.5 is bolded and it’s something like |
You have two options to duplicate the box we just created. You could either select all the layers, and “New group from layers” on the layers pull out menu and simply duplicate them. Or use the square marquee tool, select around the whole box, and go to edit / copy merged. Then edit / paste paste 5 more times and you can situate them as such.
I added the section to the right pretty quickly. I’m not going to cover this part step by step because it’s pretty self explanatory. The little triangular icons are created with the pen tool. Very easy to do, just three point and clicks and it’s done and you can duplicate them.
Step 6 : Add a footer
The footer is pretty simple. As you can see it’s a lot like the header - in fact, I duplicated one of the layers from the header along with the “rough” part of it at the bottom. Then I duplicated the text that served as the navigation and then added an extra navigation and right aligned it for a quick advertising / contact link.
Complete
And there you have it! A fully completed home page design from start to finish. It’s not all that difficult is it? Of course it’s a little daunting having to read over this entire tutorial, but really it doesn’t take all that long once you get the hang of it.
But we’re not finished just yet. We still have several steps until it’s a ready to go, html’d site. So let’s venture on to the next section.
Tidak ada komentar:
Posting Komentar