create a simple and sleek footer, create simple and sleek web 2.0 site footer, simple footer creation, simple web 2.0 footer, web2.0 footer tutorial, photoshop web 2.0 footer, phothoshop footer tutorial, photoshop footer desing

 How to Create a Simple & Sleek Web 2.0 Site Footer

Since Web 2.0 hit the internet, footers have become more important than ever, and there has been some great looking work done downstairs. In this tutorial I’ll show you how to produce a sleek looking site footer in Photoshop.

The Footer

Here’s the footer we’ll be creating, click on the shot below to see the full size version:

Step 1

Along with liquid headers and footers, gradients are a common hallmark of Web 2.0 style design. For our tutorial we will be using a neat package of gradients that simular 3d / materials that you can get from the excellent Deziner Folio site.

Step 2

Open your new Photoshop file. I’ve created mine with large dimensions – 1440 px x 900px (to fit my 17inch notebook screen). Of course your actual footer shouldn’t be this large, however it’s good to simulate what happens when your browser window is stretched.

Choose a background color, in my case the choice for background is a simple gradient with #b0b0b0 and #e1e1e1. Move your cursor on the screen holding SHIFT to create a vertical gradient down the page.

Step 3

In web design it’s very important to decide what kind of layout you are going to be creating. That is to decide between a liquid layout (one that stretches out across your browser) or fixed (in many Web 2.0 style sites fixed layouts are usually centralized). In our footer, we will work with a fixed layout measured out to 760px x 420px. These measurements will ensure that even on an 800px x 600px screen, our footer will still appear properly.

Use guides to delineate the size of your website as shown below. Note that if you want create a layout that is optimized for 1024px x 768px setups, then define your guides to delineate a 955px x 600px area.

Step 4

Although our footer is a fixed width, we still want the footer to stretch out across the page and fill out the remaining area. To do this we will use a pattern made by me in photoshop to simulate a metal plate. To download the pattern click here. Open this image in photoshop and go to Edit > Define Pattern and choose a name for the pattern.

Now open a new file with 1440px for width and 86px for height, and go to Edit > Fill and pick the pattern we just created. Select all (CTRL+A for PC and APPLE+A for Mac), then cut and paste the image into the bottom of our first document. You will get the result shown below.

Step 5
Now it’s time to user our beautiful gradient package from Step 1. Create a new layer and create a rectangle using Marquee Tool (M) with 100% of document width and 21px of height. Now select Gradient Tool (G) and select a cool gradient. I selected “Black 5 – Gloss” from the gradient package. Now move the gradient tool vertically over the marquee holding down “SHIFT” to ensure it’s exactly vertical.

Move the resulting shape to the top of the shape created in step 4. You should have something that looks similar to the screenshot below.

Step 6
Now we add a drop shadow effect to the layer we created in Step 5.

Step 7

Now set your Foreground Color to #545557 and Background Color to #1e211f. Create new layer below the step 4 layer. Use the Marquee Tool (M) to select the content of the step 4 layer. Select Gradient Tool (G), choose the first gradient (combination of back and foreground colors). Draw a gradient over the marque holding shift to get the vertical gradient. Now go to the step 4 layer and set this layer’s blending mode to Multiply.

Step 8

Now create a new layer above all the other layers and draw a rounded rectangle in the middle of our guides, choosing the color to be #dfdfdf. Right click the layer, click on Blending Options and then create a Drop Shadow effect for the rectangle. Then right-click on the effect layer and choose “create layer”. This will split the drop shadow on to its own layer.

Now you have the rectangle layer and shadow layer, move and resize the shadow to get the result below. You may wish to press CTRL-T to get the transform tool up, then right-click and choose Perspective, then drag the top two handles in towards each other. Alternately you can move the shadow down and use a soft eraser brush to brush out the top edges.

Step 9

To finish the design add some text, copyright information and your logo to the bottom.

Step 10

To get the footer ready for use in your HTML file, simply remove the text (the text will be added in HTML), flatten the whole file and cut the background of footer as shown below, then paste it in to a new file. As we did in Photoshop, the pattern can be produced using a background property in your CSS document. This is the reason why we have cut the image so small as this leads to better performance with the smaller file size.

To cut the center of footer just select the content inside guides and cut-it and paste into another file.

Save both files using Save > Save For Web & Devices and select JPG with an appropriate quality setting. JPGs and PNGs are good for images like the one shown where there are a lot of graduations of color. GIF images are better for areas of flat color. This is due to the algorithms each uses.

The Footer

And you’re done, a lovely footer element! For more great footer ideas, check out Thiuven’s 35 Beautiful Footer Designs.

design cool effect in photoshop, cool menu creation in photoshop, design cool 3D web design, create cool design, meroon background menu, restauran menu design, web design tutorial, dark background white text

Creating A Cool 3D Web Design Effect

Step 1

Create a new document with 1000x750px. Double click on the background’s layer and in Color Overlay and choose a dark brown.

Step 2

Enable the rulers (View>Rulers) on your document and add some guides as shown below. Create 2 horizontal guides, the first at 30px and the second at 250px. After that add 2 vertical guides at 100px and 900px.

Step 3

Create a rectangle with the Rectangle Tool (U). Use the guides for reference. Rename the layer to header.

Step 4

Choose black for your foreground color. Select the Ellipse Tool and create the shape that will be the shadow. Make it a bit higher than the white rectangle as shown. Rename the layer to shadow and put it below the header layer.

After that, convert it to Smart Filters, apply a Gaussian Blur and change the opacity to 60%.

Step 5

With the header layer selected, double click it to open the Layer Style dialog box. Select Gradient Overlay. Change the gradient style to radial. For the colors I used dark reds.

Step 6

Next, select the Line Tool (U) and choose the lighter color of the header gradient and create a line. After that choose black and create another line just 1 pixel above the red line. Select the 2 lines and group them. Rename the group the "vDivider".

Go to Layer>Layer Mask>Reveal All. Using the Gradient Tool, select a Radial Gradient from Black to White and apply a mask to our group. Start the gradient from the center of the group.

Step 7

Create the menu using the Horizontal Type Tool (T). Use white for the text color. Select all links and group them. Rename the group White Links.

Duplicate the group and place it below the white links, change the text color to black and move the group 1 pixel up and left. That will create a nice 3D effect, exactly like the one we did with the lines.

Step 8

Repeat the Step 6, but this time create the horizontal dividers for the links. Use the line tool to draw a red line and 1 pixels to the left draw a black line. Group them and duplicate the group 5 times. Distribute the groups as shown below.

Step 9

Select all groups of lines and group them. Rename the group toDividers. After that apply a layer mask, Layer>Layer Mask>Reveal All. But this time use Linear.

Step 10

Open the pattern file, or get any pattern you like. Select all and go to Edit>Define Pattern. Call it webPattern.

Duplicate the header layer and rename it to pattern. Go to its Layer Styles and disable the Gradient Overlay and set a Pattern Overlay. Choose the ‘webPattern’ we created and change the Blend Mode to Color Overlay.

After that apply a layer mask to the pattern layer using a Radial Gradient.

Step 11

Now we can add the logo and the spoon.

For the text, type Psdtuts+, select a bold typeface for the PSD and a regular or light for the TUTS. Go to Layer Styles and apply a Drop Shadow, Gradient Overlay, and Stroke. That’s a very common and beautiful effect.

Conclusion

When we work with web design we have to consider file sizes, browser compatibilities and many other issues. Sometimes little details like subtle gradients or borders using 2 colors can create a very nice visual effect or unique style without requiring many hacks and adjustments.

How to design menu in photoshop, design vista menu, vista menu tutorial, This tutorial will show you how to make a semi transparent Vista-inspired menu using gradients, shadows, and blurring to produce a stunning modern, menu tutorial, photoshop menut tutorial, transparent menu tutorial

How To Create a Stunning Vista Inspired Menu

This tutorial will show you how to make a semi-transparent Vista-inspired menu using gradients, shadows, and blurring to produce a stunning modern effect.

Step 1

Open a new canvas that is 600x335px. Begin by showing rulers (View>Rulers), then create two guides similar to the image below. Create one at 285px and the other at 310px.

Step 2

Create a Rectangle (U) that fills the lower ruled area and label the layer “lower bar.” Open up the Effects Menu for the layer. Navigate to the Gradient Overlay property and apply a gradient between #000000 and #0c0c0c at 90 degrees.

Now create another rectangle in the upper rules area and name the layer “upper bar.” Again open up the effects menu and apply a Gradient Overlay between #35393d and #787b7d at 90 degrees. Select the two rectangles created so far and change the Opacity to 90%. When a background is added later, this will provide a nice effect, as it allows the background to slightly show through.

Step 3

The next step is to add a highlight to the menu using the Line Tool (U). Select the Line Tool and change the weight to 2px. Draw a line across the bar and change the color to #9fa2a4. Rename this layer to “lower highlight.” Now draw another line directly above the previous and change the color to #484b4d and change the name to “upper highlight.” Group these layers with bar layers in a group called “bar.” This stage completes the basis of the menu.

Step 4

Now that the menu bar is complete, we can create a set of dividers to go between the text. Select the Line Tool again and leave the weight at 2px. Draw a vertical line from the center ruler mark that stops a few pixels before the highlight. This does not need to be exact and can easily be adjusted later. Open the effects menu and apply a Gradient Overlay at 90 degrees between #676a6d and #4d6672. Label this layer “upper divider.”

Draw another vertical line from the center ruler going down and stopping the same distance from the edge as above. This section does not have a gradient, so change the color to #43474b. Rename this layer to “lower divider.” Group the two sections of the divider and name the group “divider.”

Step 5

Select the Type Tool (T) and change the color to white (#FFFFFF). The font I chose to use for the menu is called Segoe UI because it is the font used in the Vista user interface. However not everyone has this font, so as a replacement Arial will do. Set the size to 11pt and type your links out, spacing them evenly. Group them together and name the group “links.”

Now copy your dividers and space them in between the links. You should end up with something similar to this.

Step 6

Now the menu bar is basically completed, so you can add a background of your choice. The background I chose is a photograph of grass. Anything colorful or scenic will do.

Copy your background into the menu and rename the layer Background. Make sure this layer is at the back in your layers palette. Note the transparency in the menu allows the background to show through without overpowering.

Step 7

This step will create the blurred rounded rectangle that is behind the text. This effect is quite common in Vista and is a good technique. It takes the focus of the background and places it on the text, but still shows the beautiful scene behind.

First of all, duplicate the background. This layer is not permanent, but we will be cutting a selection out of it. Then using the Rounded Rectangle Tool (U), draw a shape that starts past the left edge of the canvas. This means that the shape only has two rounded edges.

Rasterize the layer and then using the Magic Wand Tool (W), select the rectangle and delete the color while keeping the outline. Now select the background copy and cut from that layer. Delete the background copy layer and add another new layer called “blur.”

Paste the shape in the layer called “blur” and then apply a Gaussian Blur of 5px (Filter>Blur>Gaussian Blur). Then apply a Drop Shadow as shown below.

Step 8

Now add your text inside the blur. Using the same typeface as the links (Segoe UI) type your name and tagline. Select some of the text and make it bold and keep some normal, apply a Drop Shadow, and a Gradient. This produces a modern-looking text that has a striking look.

Step 9

This step is optional, as it will produce the blue highlighted glow that will become our hover effect. Draw a large Ellipse (U) that fills the area between the dividers. Change the color of the ellipse to #5c94c5 and apply a Gaussian blur of 10px. The shape has now become a raster layer, and you can clean up the excess blur by using the Marquee Tool (M).

Conclusion

This menu produces a stunning effect when coupled with a bright scenic background. It uses transparency to great effect as well as modern gradients. The use of highlights is a great trick to providing a cutting-edge modern look to pictures. This menu would be quite easy to slice up and turn into a very functional web-based menu with hover states.

how to design a nice sleek tab menu in Photoshop, Web 2.0 style. Step 1 Create a new canvas with white,design a Web 2.0 tab with Photoshop design web tab, , round corner menu tutorial

The follow guide below attempts to give you an idea how to design a nice sleek tab menu in Photoshop, Web 2.0 style.

Step 1

Create a new canvas with white[#ffffff] background at any size you like, preferably rectangular; they are more suitable to draw tabs. Then switch to Channels Tab (Windows -> Channels), click Create new channel on bottom right.

Step 2

On the channel layer selected, draw similar shape with Polygonal Lasso tool. Fill it up with white color[#ffffff]; unselect the Polygonal region (select any Marquee tool and hit the screen one); give the shape Gaussian Blur with radius 6.0px.

Step 3

CTRL-L to call up the Level Dialog and push the left and right arrow to meet the center arrow, like the image above. This will “smooth” your blur-ed shape up and give you a nice rounded corner shape.

Step 4

In Channels Tab, Hold CTRL, click on Channel Thumbnail of layer Alpha 1. The new shape will now be selected, switch back to Layers Tab, Create New Layer and fill the selected area with black [#000000].

Step 5

Remove rounded corners for bot bottom left and bottom right, move it towards the left and position it as illustrated above. Next we will focus on the black color Tab.

  Hold CTRL, click on tab’s Layer Thumbnail to get the entire tab image highlighted.
 

 With the tab image still highlighted, select Rectangular Marquee Tool, hold ALT and draw a rectangular of region we want to remove.

 You should only see the top part selected. Select -> Modify -> Contract, Contract by 2px and you should get something like the image on the left.

 Create a new layer, fill the highlighted region with white[#ffffff]. Right click, choose Blending Options then Gradiant Overlay. Replace the white[#ffffff] color stop with gray[#616161]. Your tab should look like the image on the left. 
 
Step 6

Create a new layer; Select Rounded rectangular Tool (Radius 8px), draw a rectangular and put this layer behind the black tab layer. Right click and select Blending Options and insert the following settings.

Drop Shadow

    * Opacity: 31%
    * Distance: 0px
    * Spread: 0%
    * Size: 2px

Bevel and Emboss

    * Depth: 100%
    * Size: 0px
    * Soften: 0px

Gradiant Overlay

    * Here are the Color stops settings.
    * Color: #aaaaaa, Location: 0%
    * Color: #ffffff, Location 100%


Step 7

Put in some text to see the overall web 2.0 look. I’m using font Lucida Fax, font-size 32pt and 25pt. And your tab is done! Feel free to play around with the Tab’s colors combination.

logo, free logo, logos, logo tutorial, photoshop logos, logos creation in photoshop,designing logos,sports logo,logos in photoshop, web logos,logos for webdesignhow to make an awesome logo awesome logo, creat logo

Introduction

Back when I began my ventures on computers in 98 on AOL, I was one of the many mesmerized by the world of AOL "proggies". I began to code my own with VB and I remember one of the things I loved to focus on personally, was the whole intro art. I saw a few, I can't remember the names now, but their amazing fire effects with their lightening bolts blew my mind away. Thus began my journey of design.

I've designed for approximately 9 years now and I've learned a lot. It has also helped me make money online. From mainstream corporate professional design, to fun gaming design, to adult design. The accumulative experience of all these avenues have really helped further my abilities when I confront each new project.

In this tutorial, I will start and finish a logo while documenting the entire process. I encourage you to open up photoshop and follow every step, it will help you learn a lot more than just reading it.

I've used the technique I will be teaching to develop a lot of logos. Here are just a few: 

1. Setting up your Document in Photoshop

• Once you have photoshop open, go to File -> New. Then specify the name of the logo, and a width of 600 and a height of 500.
• Then click "OK" (Refer to the screenshot below).

After you click "OK" Your setup should look like this:

(I'm on a 1600x1200 resolution.) For the menus on the left, I have the layers view, and the Characters in view.)

 

2. Experiment with Font Selections

As a starting point, I always experiment with a font that I think will work well with the logo. You have to develop an eye for what font will or will not work, with the specifics of the project in mind. Since for bluelaguna we're trying to focus on a serious yet gamer'ish feel, a serious font selection might be the best bet. Having yourself an arsenal of fonts is very important. I have several thousand myself.

• Select the Text Tool on the left menu: (As shown on the image to the right)

• Adjust the settings on the Text Properties at the top to match these settings:

•  In the character window to the right, set AV to -60 as shown below: (This simply shortens the space between each separate character, I like starting out with this setting, I don't know why :)

 

• Type "BLUE LAGUNA" in the document space (First, be sure that the background is white, you can use the fill tool for this. And I've decided to go with all caps to start out with, since all caps is generally deemed more serious).

With the type tool selected, and layer 1 selected, select the font list menu (where it says Arial):

 

 You can do this next section in either three ways.


- Hit the "Down" arrow to change the font view of "BLUE LAGUNA".



- Hit the Down Arrow of the Font List to see the list of available fonts with a tiny preview of the font.



- Download a font viewing program.



I personally just use the first method, although I sometimes use a font viewing program. Our goal here is to find fonts that might work with the logo.


Once you come across a font that looks like it could work, you should Duplicate the layer in the Layers Window to the right, and then hide the previous layer (The layer you right clicked and selected "Duplicate" from. This way, you've saved that font selection (the hidden layer), and you have a new layer to find more fonts from):

3. Good and Bad Font Selections

Since our goal with this particular logo is to be serious, we need serious looking fonts. It simply takes time to develop an eye for what is serious and what isn't. 

Here are a few examples of bad font selections for this project:

The first logo (the top), has a very laid back, fun / unprofessional tone to it.

The second logo is simply "goofy" looking, and it's generally always bad to select a logo that has an inherent shadow.

The third logo is way too "ragged" with its frills all over the place, definitely a no go.

Calligraphy logos are generally outdated, especially ones with weird "drops" coming from them.

The last logo you can hardly even read. Remember, a logo should be easily readable.

Here are a few examples of good font selections for this project:

All of these logos with the exception of 4 and 6 are pretty much similar. 

#1, 2, 3 & 5 are all very simplistic and serious in appearance.

Logo 4 still appears "serious" even though it is significantly different from the rest. I chose this just in case I want to experiment with piecing together fonts for the word "Blue" and "Laguna".

Logo 6 is a very bold / italicized logo that says nothing but serious.

4. Finalizing a Font Selection


Once you have some possible font selections, each in their own layer, you further analyze them and see which works. With logos that have more than one word, most of the time it is good to separate the appearance of the words from each other. Since this particular project has two words, "Blue" and "Laguna", we're going to want to separate them by possibly choosing two different fonts. You can also separate words from each other by keeping the same font, but changing the color. So I'm going to experiment with the 6 good font selections above.


This is what I've come up with:


Although I didn't use one of the 6 fonts I selected initially for the word "blue", I simply used an unboldened version of "LAGUNA", which keeps a consistent feel but also allows for separation of the two words.

5. Adding in a symbol


Sometimes logos work well with only the use of fonts, but most times adding in a relevant symbol of some sort will really make a logo stand out. When I say "symbol", I mean any part of the logo which isn't actual text. So let's start with the first font selection from above:

Now here is where having an eye for design and experience is a really big help. We need to begin contemplating ideas of what exactly we can add to this logo to make it awesome. So, the first thing I do is just sit there and stare at the font selection and think of what exactly the product/service/site is all about. Well, BlueLaguna.Net is about gaming, more specifically speaking, it's a site that offers RPG media (Role Playing Game) media. Therefore, we have two things to work with: RPG and Media. What exactly can we associate with both RPG and Media? Well, we don't necessarily have to convey both RPG and Media through the logo (if you try to get too complex, the logo will become cluttered). We can choose one or the other if we want. I think it'd be most logical to focus on the whole RPG aspect, as you can find media all over the place and it isn't an entirely unique concept. 


So let's do some research on Role Playing Games. We need to figure out a symbol which can really represent RPG. The current BlueLaguna.Net features a 3d female, perhaps that has something to do with RPG? Well, let me do a search on images.google.com for "RPG". The results turn back a few different female characters, Hmm! The first few results, keeping in mind the 3d female character on the current header of bluelaguna.net, seem to suggest that depicting a female in the logo might be the best bet. It also seems that weaponry / mystical environments are associated with RPG as well.


Now that I know what I can associate with RPG, I can come up with some possible ideas for a symbol. I think maybe featuring a face of one of these RPG'ish females with maybe a hint of mysticism.


The Pen Tool is your Friend


The most important tool when it comes to logo design is the pen tool. If there is one tool to thoroughly understand, it should be the pen tool. The pen tool allows you to create any shape(s) you want, and maintain vector format (which is very important if you ever want to size your logo up n' down (for professional print or whatever.)
It's always good to draw your logo by hand without copying over a picture (vector tracing), but if you aren't very talented and don't have much experience, it might be your only option. So for the sake of making the biggest impact on this tutorial, I will teach you all an awesome technique for creating great looking symbols for you logos.


Finding a suitable picture


If you're going to trace, I always suggest using a site like istockphoto.com to find the image and pay for it. This way you won't be using copyrighted images to trace over. Or taking your own picture to trace over. Unfortunately though, istockphoto has nothing with RPG or "anime". So I just went on images.google.com and found a picture which I think is suitable, here it is:


When I came across this picture, I got the idea that I can vector trace over her face and hair to create what I want, and then integrate it along with the font selection in some unique way.


So once you've found the picture you want to trace (if not the same one), save it to your hard drive, open it up in photoshop, CTRL-A, CTRL-C to select it and copy it, and go back to your main logo document and CTRL-V.
Now you've imported this picture into your logo document. Once you've imported it, with her layer selected, you can cut off the bottom half of her body. (Select the first tool in the upper left corner of the tools menu, Rectangular Marquee Tool), select the bottom half of her body and hit the delete key. Your screen should look something like this by now (You can hide the text layers behind it).

Vector Tracing


Now select the magnifying glass in the tools menu and select around the girl, it will look like this zoomed up to about 400%:

Now select the pen tool in the tools menu:

 

Make sure that the foreground color (the black square at the bottom of the pic to the upper right ---^) is the same dark blue color of the text we specified.


In the layers window to the right, select the little round circular > icon on the upper right corner of the window, and click on "Create New Layer" in the window that comes up. Hit "OK" and then in the layers window, with the new layer selected, change the Opacity to 0%. We do this because once we start tracing over the image, we don't want the dark blue color hiding the picture of the girl below.


And with the pen tool selected, click a point somewhere on the outline of the hair (at the top), and then click to make another point somewhere on the hairline where the line will begin to form. You can hold down and "direction" the angle of the line to create a certain type of curve. It takes awhile to get the hang of, but it's very easy once you get the hang of it. After plotting points of an entire section of hair, yours should look similar to this: (Note: I've lightened the opacity of the girl to illustrate what your lines should look like so far)

It's not perfect, but for now it's a good start. 




Now I'm simply going to continue creating more shapes, like the facial features. After 15-20 minutes or so of creating the different facial features and the face itself, here is what I have come up with:


As you can see, I specified a different color for the face (light blue). And by now I have around 15 different layers. There's a separate layer for the top portion of each eye, the bottom portion of each eye, the middle, and the small glare. There's also a layer for the face background, and the ear. 


So let us continue and add some shading...

 After about 20 more minutes of shading, this is what I've come up with: 
 
There are a total of 3 different layers for the hair. It's somewhat of a tedious process to do hair shading simply because there's a lot of strands of hair! But you have to just condense them and get the general idea of the shading and it will work out well. 


Then I did some light shading work on the face and the neck.


Now I consider the actual draft of the symbol complete. Let's make our initial text layer visible and see what we can do to integrate the symbol with the text.

First, you will want to select the very last to the very first vector layer that you created (you'll have a couple dozen or more), hold down the shift so you can select them all. Then in the layers window click the little circular round button and select "New Group From Layers". This will put all of the layers of the girl, into one easily manageable layer group. This way, you can move around the one group and it will keep all of their positions together so it won't break up her face.

  
Now this actually doesn't look too bad, in and of itself. But the proportion of the anime head is too big, in relation to BLUELAGUNA. So we will want to scale down the head. Let's try moving it over to the left, and adding the slogan + the ".net" text. This is what it looks like:

Now it looks pretty damn good eh? The only other thing I did, was with the pen tool, I added a white shape over the "B" in "BLUE" so that the face doesn't collide with the B. 

Unfortunately I messed up and didn't design this over the dark blue'ish background that the bluelaguna.net has. So I'm going to change the colors of the logo to fit a background of an appropriate header for the site.

 

As you can see, simply changing colors around can really change the look and feel of a logo. I'd consider this logo a winner.

6. Conclusion

I can pretty much guarantee you that if you're a first time user of the pen tool or photoshop for that matter, it won't turn out so pretty like mine did. It takes some time and patience to really get the hang of it. It's all about getting a little creative and working at it for awhile.