Link:INB Home|INB English| INB русский язык|INB العربية|INB Türkiye|INB فارسی|INB Español|INB Français|INB Português|INB Deutsch|INB 國語|INB 中文|INB 日本语|INB 한국어|INB ภาษาไทย|INB tiếng Việt||[PS]Photoshop Tutorial Designing a Christmas-Themed Web Layout 2
INB English forum
Welcome to (Industry & Native boffin) The industrial age here is full of fighting spirit, you and I both through this network space with Native biological spirit boffin came to the mad labs. home INBforum.com, come and join us Permanent name: inb-english.forumotion.com
INB English forum
Welcome to (Industry & Native boffin) The industrial age here is full of fighting spirit, you and I both through this network space with Native biological spirit boffin came to the mad labs. home INBforum.com, come and join us Permanent name: inb-english.forumotion.com
INB English forum

Welcome to (Industry & Native boffin) The industrial age here is full of fighting spirit, you and I both through this network space with Native biological spirit boffin came to the mad labs. home INBforum.com, Permanent name: inb-english.forumotion.com


You are not connected. Please login or register

《《《《《《《上一页INBforum   Go down

上一页INBforum》》》》》》》View previous topic View next topic Go down  Message [Page 1 of 1]

1[PS]Photoshop Tutorial Designing a Christmas-Themed Web Layout 2 Empty [PS]Photoshop Tutorial Designing a Christmas-Themed Web Layout 2 Mon Sep 20, 2010 10:12 pm

Admin

Admin
Admin
[You must be registered and logged in to see this image.]
In the above image I’ve used: Tahoma, 11pt, Bold, #ebbe97, and Anti-Aliasing set to None. [You must be registered and logged in to see this image.]
4. Navigation Area


Let’s make the navigation box/buttons. Firstly, start by creating a new layer, then make a large, rectangular selection underneath the header bar (with only about 1 pixel between them).
[You must be registered and logged in to see this image.]
Now, fill this selection with a relatively bright-orange color, I’ve used #d53900 here. You can in fact fill the selection with any color you want, but for this tutorial you can use what I used! [You must be registered and logged in to see this image.]
After filling your selection, apply the following layer styles to your navigation box layer:

    <LI sizset="34" sizcache="4">Inner Shadow
  1. Gradient Overlay

And now your box should look like this:
[You must be registered and logged in to see this image.]

Looking good! Now I’ve added in a little bit of grunge brushing on the left side of the box, for the sake of nice little details. For some nice grunge brushes you can go to PhotoshopBrushes.com and download some of their free brushes (they have paid ones aswell, just don’t get sucked in!)
A few other good brush resources are:

    <LI sizset="37" sizcache="4">Brusheezy
    <LI sizset="38" sizcache="4">Misprinted Type
  1. DeviantART

I love ‘em! [You must be registered and logged in to see this image.]
So, after you’ve done a little bit of black and white grunge brushing inside of your navigation box, change the layer modes to either Overlay or Soft Light and lower the opacity to around 40-60%, this will make your brushing blend in a little bit nicer.
[You must be registered and logged in to see this image.]
Can you see it? Well, I can at least.
Next thing to do is add in the actual buttons. So, all on the same layer, make some button-sized rectangles 1px apart, just like mine shown here:
[You must be registered and logged in to see this image.]
My selections were 180 x 26 pixels in size. Again, go into the Blending Options for your buttons layer and use the following settings:

    <LI sizset="40" sizcache="4">Blending Options: Main
    <LI sizset="41" sizcache="4">Inner Glow
    <LI sizset="42" sizcache="4">Bevel and Emboss
    <LI sizset="43" sizcache="4">Gradient Overlay
  1. Stroke

And now, your buttons should look like this!
[You must be registered and logged in to see this image.]
Very nice so far. Lastly for these buttons you need to add in the navigation text.
[You must be registered and logged in to see this image.]
In the above preview I”ve used Tahoma, 12pt, Bold, #ffffff. Not bad so far, huh?
5. Designing the Header Graphic


So let’s make that header graphic for the template now. Firstly, create a new layer then make a selection the same height as the navigation box, and all of the width left in the template (other than 1px at each edge, that is).
[You must be registered and logged in to see this image.]
Fill this selection with a nice sea-blue color (I’ve used #1d78c4).
[You must be registered and logged in to see this image.]
More layer styles. Apply the following layer styles and settings:

    <LI sizset="45" sizcache="4">Inner Shadow
  1. Gradient Overlay

Should be resulting in something nice like this:
[You must be registered and logged in to see this image.]
Again with the grunge, I added a little bit in the top left corner of the banner graphic. I then changed the layer mode to Overlay and left the opacity intact.
[You must be registered and logged in to see this image.]
Now I’ve added in some snowflake shapes for a nice detail. For these, get the Custom Shape Tool out and use the snowflake shapes on a new layer.
[You must be registered and logged in to see this image.]
And here are the shapes:
[You must be registered and logged in to see this image.]
If the shapes aren’t there for you, click the little arrow on the right of the box and select All, or Nature, then you should have the snowflakes shapes.
[You must be registered and logged in to see this image.]
The snowflakes look quite cool just like that, but I went ahead and applied these layer styles anyway:

    <LI sizset="47" sizcache="4">Blending Options: Main
    <LI sizset="48" sizcache="4">Inner Shadow
    <LI sizset="49" sizcache="4">Outer Glow
  1. Inner Glow

My snowflakes now look like this:
[You must be registered and logged in to see this image.]

Next thing I did for the header was add in some trees. Please note that I did not make these, they’re some clipart I found on the internet somewhere. You can download them from here though: Carton Christmas Trees Clipart.
[You must be registered and logged in to see this image.]
For the sake of tiny details, I then added a dark gradient 1px from the top of the banner and navigation box.
[You must be registered and logged in to see this image.]
Now I’m going to add in a little bit of snow to the bottom of the banner. To do this, you’ll first need to create a smooth, hill-like path with the Pen Tool, make your path into a selection then fill with white (finish off by deleting excess white).
Finish this off by doing a little bit of brushing inside of the snow layer.
[You must be registered and logged in to see this image.]
Lastly for the header, you need to add in some text, preferably your website name or some descriptive text. I’ve used the same font as before, so I recommend you do aswell.
[You must be registered and logged in to see this image.]

To this text layer I applied a Drop Shadow and a Gradient Overlay.]

http://eng.inbforum.com

上一页INBforum   Go down

上一页INBforumView previous topic View next topic Back to top  Message [Page 1 of 1]

Permissions in this forum:
You cannot reply to topics in this forum

Copyright ©2009-2016 LTD Creative Commons License
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

IT:SINGLESERVGoogle谷歌翻译TranslateFORUMSOFTLAYERGoogle谷歌广告联盟AdSenseAsia

 

Forum create on Forumotion | ©phpBB | Free forum support | Report an abuse | Forumotion.com