Hello there, and welcome to our first tutorial on webtint. In this tutorial we’ll be learning how to make a nice, clean, eye catching web layout that anyone could make. Really, it’s quite easy, and I hope you learn a thing or two from it. Enjoy.
To start this tutorial I’m going to make a new document of size 1200×1060px. If you plan to put this on the web you’re going to have to resize everything to fit into the average monitor. However for purposes of design, I’m going to run with the larger width.
You’re going to want to fill the background layer with the colour #1b2022, using the fill tool. I’m not going to show a picture of this as it’s pretty straight forward.
Lets start making the basic layout. Set your foreground color to white (#ffffff), and grab your rounded rectangle tool. Set the radius to 2px (in the top toolbar) and draw a shape similar to below, roughly 1100px wide. The height isn’t really of any concern, but anywhere around 950px as I’ve done below. The blue lines are just guide lines. You can ignore them.
Now, Rename this layer to “White Background”. Right click on it, select “Blending Options..” and click on “Stroke”. Give it these settings:
First of all we’re going to concentrate on the header, so we can get that out of the way. You’re going to want to grab your rectangular marquee tool, and make 3 selections. and fill them with the colors shown below on new layers.. If you’re wondering, The selection i filled with #141414 runs about 30 pixels off the side of the “White Background” layer.
Okay, rename these layers as follows: Call the pink layer “Pink menu”; the Darker, Wider layer “Black header”, and the Grey layer, “Grey Block”. This is just so it’s easier for me to explain what to do next.
Next, set your foreground to black (#000000) and grab your pen tool. Draw as shown below, just below the “Black header” layer.
Repeat this for the other side of the black header, and lets continue with the tutorial. Now that that’s sorted, Select the Black Header layer. Go to Filter –> Noise –> Add Noise, and use these settings:
Then go to Filter –> Render –> Lighting Effects, and give it settings similar to this:
Make a selection like below (the whole way across the “Pink menu” layer) and fill it with #b83047 on a new layer.
Now hold ctrl (or command on a mac) and click on the thumbnail of the “Pink Menu” layer. This will make a selection of that layer. Change your foreground color to #ebb3b2. Make a new layer, and call it Gradient. Grab the gradient tool, and select the gradient which is your foreground to transparent, and draw a gradient like below on a new layer.
Drop Opacity on this layer to around 20%. Now make another selection, like below and fill it with #7c1922 on a new layer. Rename this layer to Selected Box.
Now lower opacity on this new layer to around 25%. Finally, zoom in to the menu and take a sample of the color of the top of the “black header”. Then draw a shape on a new layer using the pencil tool as shown below, at the center of the “Selected Box”.
Congratulations on getting to Step 3. In this step we’re going to add some text. First of all, however, lets add a rounded rectangle to the right hand corner of the black header layer, as shown below. First of all, set your foreground to #333636, and draw a shape like below (with radius set to 2px).
Lower the opacity on this layer to about 50%, and add some text. Below I added an RSS Cup Icon, which you can find HERE. The “Subscribe to RSS” text is in Arial Size 21pt, in bold with anti-aliasing set to none, in #ffffff. The text below that, “You know you want to”, is in Arial Size 14pt, in bold with anti-aliasing set to none, in #555959.
Next lets add a logo or what have you. What I did was got a font known as Bebas, which you can find HERE. The “Webtint” text is in Size 45pt, with anti-aliasing set to Sharp in white (#ffffff). Meanwhile the “.net” text is in Size 18pt, with anti-aliasing set to sharp, in #404444.
instead of explaining what colors to do with a load of text, I’ve instead wrote all the required colors and such on the image below. All the text described in the image below has no anti-aliasing, for the record.
Here’s a quick screen of what I have so far:
For the content, I started by doing the following. This was what I thought a post snippet could look like on the front page of such a website. The icons I’m using (the coffee icon) is a free set made by weFuction that I love and actually use on this website. You can find it HERE.
The “I’m not a big fan of coffee” text is in Georgia Bold, Size 20pt in #393939. Whereas the “Really? I quite like coffee to be honest” text is in Arial Bold, Size 14pt in #9b9b9b. The main body text below that, is in Arial Italic, Size 14pt in #585858. Finally the “READ MORE »” text is in Arial Bold, Size 14pt in #393939. None of the text is anti-aliased. I duplicated the “I’m not a big fan of coffee” and “Really? I quite like coffee to be honest” layers and moved them across, and put it next to another icon from the function set, and ended up with this:
Next I added two dotted lines. To create these lines you’re going to have to first make a new document, width 4px, height 1px. On this document, make a new layer and delete the background, grab the pencil tool and in black draw the following:
Now go to Edit –> Define Pattern. Name it whatever you want and click OK. Now close this document and go back to your web design. Make a selection like below (1px high), and fill it with white on a new layer.
Then right click on this new layer and select Blending Options. Go to “Pattern Overlay and give it these settings:
Do the same for under the “Most Popular” title. I also added some content to this area. All this is, is a few rounded rectangles in #fff3ab, with a radius of 2px, with some text added to the top in Arial Bold, Size 14pt, in #7c7653. The text beside each of these rounded rectangles is in formatted as follows: The top line of text is in Arial Bold, Size 14pt, in #313131, whereas the bottom line is Arial Italic, Size 14pt in #9b9b9b. Again, none of this text has any anti-aliasing.
Finally, I finished up the content until I ended up with the following. I’m not gonna explain how I made the rest of the content, since there is no technique used that should be beyond you. In the end however, I ended up with this
Finally, you may want to add a copyright to the bottom, especially if you plan on using the icons on a live version of this design, so please, credit weFunction.com, and maybe add in “All Rights Reserved”. The writing is just in Georgia Bold (18pt and 15pt), in two sizes, No anti-aliasing, in #73787a. Want to see the final version of the website? Click on through:
0 comments:
Post a Comment