Technoid

In this tutorial I will teach you how to create the Technoid template header/navbar using Adobe Fireworks. Keep in mind that you can also follow this tutorial to replicate this design on Adobe Photoshop as well (but functions and function names will differ). This template does not follow a standard grid system. In fact, this does not follow any grid system at all. The objective of this tutorial is to teach you how to freehand a template without any grid-locks/systems.

Fonts

The main focus on this template is the font used in the logo. I feel that the font is what brings the entire template together. All fonts used on this template are listed below.

Logo >  Font: Technoid  >  Download: http://www.dafont.com/technoid.font
Navigation >  Font: Trebuchet MS  >  Microsoft
Body >  Font: Arial  >  Microsoft

The Final Product

Let’s take a quick look at our final product. All the work we put into this design will be to create this  final product (or something close to it). Note that in this tutorial I will give you several options that may give your layout a different look (slightly different).

IMG1 - The final design without text-shadow. Click image for larger preview.

IMG2 - The final design with text-shadow. Click image for larger preview.

Letterpress Effect

In this design you have the option of taking advantage of text-shadow or, as it’s often referred, letterpress technique. What this effect does is it gives the viewer an impression that the text is embossed (or beveled depending on how you look at it) into the background. The use of this effect has taken the web design world in a rush and is one of my favorite effects. I am not going to talk about this in this tutorial as we already talked about it in detail in the Basics of Text Shadows and Smashing Magazine has a in-depth discussion on this topic.

General Rule of Shadows: A shadow, as talked about in our previous tutorials, are dependent on your light source. If your light source is on the top left, then the shadow your texts (and all other objects) casts will be to the bottom right, if to the top the the shadow has to be on the bottom and vice-versa.

For this template, we are using a light source from the TOP-center. This means that all shadows we cast will be directly down or in numbers 270 degrees.

When coding you can also apply the text shadow effect in CSS and thus cut-down the load time of your site. This is achieved by adding the following line to your text class:

text-shadow: 0 1px #FFFFFF;

The above code will add a 100% solid shadow to your text. But if you want to add some transparency, then you would use RGBA instead of the hex color code.

text-shadow: 0 1px rgba(255,255,255,0.9);

The three 255 numbers are the red, green and blue (RGB) numbers for white. The 0.9 is the alpha number or the amount of transparency we want in our color. If we set the alpha number to 1, it would produce a 100% solid color.

How to Make Technoid

Enough with the intro, lets start on this tutorial shall we?

Step 1: Open up Adobe Fireworks on your computer. Create a new documents by going to File > New or by pressing CTRL + N. When the new document dialog box opens, input the information below and press “OK”:

Step 2: Let’s create a new layer called “Header.” This header layer will contain our logo and search box. You can also include a inner layer for the navigation; however, for the sake of this tutorial, let’s make the navigation a layer of its own.

Step 3: We’re going to start this step off with creating the logo. The logo is quite simple. Let’s click on the Text icon from our tools panel and click anywhere on the screen to start writing. You can type any name you want, but for the sake of this template, I’ll put the name “Technoid Inc.”

On the properties panel select the following settings:

Font: Technoid
Font Style: Leave this blank
Font Size: 50
Font Color: #7F1F0C
Blend Mode: Normal
Leading: 120
X-Distance: 114
Y-Distance: 69
Anti-Aliasing Level: Smooth Anti-Alias

Now we need to add the beveled effect. To do this simply Create a new filter by pressing the + icon in the properties panel. From the drop menu select Shadow and Glow > Inner Shadow. Now insert the following settings.

Distance: 2
Color: #4E1407
Opacity: 65%
Softness: 2
Angle: 270

Step 4: The search bar is created using shapes and playing with the font-properties settings. Let’s start of by creating a new rectangle with the following settings:

Width: 250
Height: 30
X-Distance: 830
Y-Distance: 79
Fill Color: #E7E7E7
Border Color: #CCCCCC
Stroke Category: 1-Pixel Soft
Roundness: 50%

Now duplicate the box. Right click on this layer and go to Arrange >> Send Backward (or simply hit CTRL + Down arrow). Move this down 1px and to the right 1px and change it’s border color to #FFFFFF. This will give it the beveled effect that you can also add to your texts.

Step 5: For the search text, select the text icon from the tools panel and click anywhere on the canvas. Type the word “SEARCH” in capitals with the following settings:

Font: Trebuchet MS
Font Style: Regular
Font Size: 16
Font Color: #999999
AV Kerning: 200
Align: Right
Leading: 120
X-Distance: 1000
Y-Distance: 84

If you like, you can apply the text-shadow effect to the text as well.

Step 6: Now create a new top layer called “Navigation.” Click the rectangle tool and create a rectangle with the following properties:

Width: 1000
Height: 50
X: 100
Y: 136
Fill Option: Linear
Fill Color 1: #EBEBEB
Fill Color 2: #D5D5D5
Edge: Anti-Alias
Border width: 1
Border color: #CACACA
Border type: 1-Pixel Solft
Roundness: 25%

Step 7: Create a similar rectangle with the following properties:

Width: 998
Height: 48
X: 101
Y: 137
Fill Color: none
Border width: 1
Border color: #FFFFFF
Border type: 1-Pixel Solft
Roundness: 25%

You can also accomplish something similar to this step by using the Inner Glow filter effect but it will not have the same outcome as for some strange reason Adobe Firefox will change your glow distance to 2 instead of the 1 you enter.

Step 7: Enter your navigation content. I have a few setup in the final preview above which you are more than welcomed to use. I used Trebuchet MS for the font, with #757575 for the regular link. I also added a letter spacing (AV) of 100. For the font hover, I used #7F1F0C for the font color. You can also add text-shadow effect described above.

Step 8: The link dividers are quite difficult to make. We’re going to start off by making 2 lines with the height of 46 and width of 1 (or 2 if you like). Place these two lines next to each other and group them. Yes it is important that you group them. Next go to Commands >> Creative >> Auto Vector Mask. Select the top right most option (circle with two manipulation hands) and hit apply. Once you do that, you will now have a nice fading effect from both top and bottom and a little form the sides (not too visible). You will also see green adjustment points. Using these green adjustment make your work box larger to remove any side items from being removed. That’s it you have your dividers.

Step 9: Below this box I used something called a shadow line. To create a shadow line, we must:

1. First create an eclipse that is 800px wide and 20px high,
2. Change the “Edge” in properties panel to Feather with an amount of 10,
3. Flatten our shape by Right Click >> Flatten Selection (or CTRL + ALT + SHIFT + Z),
4. Our shapes name should now change to Bitmap and we now have the ability to erase portions of it,
5. And now from the tools menu select the Polygon Lasso tool and cut off 60-80% from the top of the shape (depending on how much shadow you want to cast). You can also use the punch
   

Position the shadow line at X: 189 and Y: 185 behind the navigation bar. Got the lazy-bug? Don’t worry we’ll help you out. Click here to get the shadow image.