DASKLNEY'S PHOTOSHOP TUTORIALS

NEW PHOTOSHOP TUTORIAL ADDED!

2006-08-25T21:04:00.000+07:00

Professional Content Box
Yeah! This tutorials will help you create very pro content box. Check it now!

Cool website tutorial - Part 1
This tutorial will help you create simple website layout with cool glossy header!

Simple WMP 11 Logo
A cool high-tech logo will make your website
seen high-end!

PROFESSIONAL CONTENT BOX

2006-08-25T20:41:00.000+07:00

Step 1: Create New Photoshop Document with background color: #5A5A5A

Step 2: Create New Layer and Rename it to bg. Using Retangular Marquee Tool and draw one Retangular Marquee. Fill it with this pattern:

Step 3: Create New Layer and Rename it to Border. On this Layer Click Edit » Stroke, One dialog appear. Apply setting like picture below and click OK button.

Next, Apply Outer Glow setting for this layer:

Step 4: Create New Layer Between Layer bg and Border and Rename it to line top. Using Retangular Marquee Tool and draw one Retangular Marquee

Fill it with any color you like and apply these Layer Style setting:

Duplicate line top Layer and Rename new layer to line bottom. Scroll it to bottom of your content box:

Step 5: Create New Layer and rename to content. On this layer, using Retangular Marquee Tool draw one Retangular Marquee inside your content box, and fill it with color: #C8C8C8

Then, add stroke in Layer Style with Color: #FFFFFF and Size: 1px

Step 6: Create New Group, rename this group to HL and scroll this Group to bottom of your Layers windows:

Add new layer in this group and rename it to line, on this layer using Pen Tool to draw one Custom Shape Layer:

Apply these Layer Style for this layer:

Step 7: Add more details for this group. I added one line at bottom of line Layer:

Duplicate HL group and name is HL bottom. Click Edit » Transform » Flip Verticle. Scroll this group content to bottom at your content box:

Final: Add content and some details for your content box, here is my final result:

SIMPLE LOGO FOR YOUR WEBSITE!

2006-08-04T13:37:00.000+07:00

Step 1: Start your Adobe Photoshop and Press Ctrl+N to create new document:

Step 2: Use Ellipse Tool (U) to draw one circle:

Rename Shape Layer (Shape 1) you have created to Base.

Step 3: Double click on base layer to open Layer Style, set your Layer Style like:

Your document now look like:

Step 4: Create new Layer and rename it to Icon. Use Custom Shape Tool (U) to draw one icon you like.

Step 5: Create new Layer and rename it to Highlight. Use Pen Tool (P) to draw a custom path like:

Right Click on the path you have create and choice Make Selection... One dialog appear, select Intersect with Selection and then click OK to apply.

Step 6: Use Gradiant Tool (G) to draw gradiant into your selection in Highlight layer.

Your document now will look like:

Step 7: Create New Layer and rename it to shadow » On this shadow layer, Ctrl+Click on base Layer to create Seclection » Fill it with color Black » Move this layer to bottom of your Layers

Press Ctrl+D to deselect. Press Ctrl+T to Free Transform:
Height: 15%
Width: 80%
Set this layer Opacity to 90%

Step 8: Now, click Filter » Blur » Blur More
Then Press Ctrl+F to repeat this Filter until you can reach like the final result.

Hope you can do well!

COOL WEBSITE TUTORIALS – PART 1

2006-07-29T08:57:00.000+07:00

PART 1: SITE NAVIGATION BAR

(Note: All images were resized, click on images to view full size!)

1. Create New document: Click File » New:
- Width: 777 pixel.
- Height: 780 pixel.
- Background Contents: Transparent.

2. Using Paint Bucket Tool (G) » Fill Layer 1 with:
- Pattern: Below
- Rename Layer 1 to Main BG.
Use Pattern Below to fill your background layer:

3. Using Rounder Rectangle Tool (U) with Radius: 5px to draw Navigation Bar:

- Rename this Shape Layer (Shape 1) to Nav.
- Now, your Layer Window will look like:

4. Double Click on Layer Nav to Open Layer Style: Set Nav Layer Style like these pictures:

5. Using Horizontal Type Tool (T) and type some text for title and slogan of your website. I type DASKLNEY STORE for title and YOUR ONLINE DIGITAL STORE for slogan. Style of these text:
DASKLNEY STORE
- Font: Dirty Ego [Download free at www.dafonts.com]
- Size: 20 px
- Type: Smooth
- Color: White
YOUR ONLINE DIGITAL STORE
- Font: AdvoCut [Download free at www.dafonts.com]
- Size: 9 px
- Type: Smooth
- Color: White
NOW, YOUR NAVIGATION BAR WILL LOOK LIKE:

6. Double click on Layer Title Layer, Slogan Layer and change Layer Style like a picture:
(Title Layer, Slogan Layer depend on your text you have created)

Put your logo or icon into navigation bar:

7. Using Horizontal Type Tool (T) to create your navigation bar text. I type: HOME | SPECIALS | ABOUT US | SERVICES | SUPPORT | MY ACCOUNT.

Set Layer Style like:

8. Duplicate this layer and rename to this duplicate layer to Background. Clear layer Backgound styes and set it color to: #545454.
Move Background Layer like this picture:

9. Ctrl + Left Click on Nav Layer » Create New Layer and rename it to Highlight:

10. On this Highlight Layer: Using Rounder Rectangle Tool (U) draw one Rounder Rectangle with:

You navigation bar now look like:

11. Using Pen Tool (P) and Direct Selection Tool (A) draw this path like:

Right click on this path [Using Direct Selection Tool (A)] and choice Make Selection...

One dialog appear, choice Intersect with Selection option and click OK.

12. Your navigation bar now will look like:

Using Gradiant Tool (G) and draw one Gradiant in this selection.

That's all!
Hope you can do as well as I do!
YOUR FINAL NAVIGATION BAR MAYBE LOOK LIKE:

I’m Vietnamese. This is my first Photoshop Tutorial I’m write in English. My English very bad, hope you understand all I want to say in this tutorial!

PART 2: SITE CONTENT WILL COMING SOON!