آموزش فتوشاب
آموزش سریع وآسان فتوشاب
چهارشنبه 3 اسفند 1390 :: نویسنده : abdollah khalili

اموزش ساخت یك دكمه دانلود

 

Make a Slick and Dark Button Sprite

Make a Slick and Dark Button Sprite

 

Make a Slick and Dark Button Sprite

In this tutorial, I am going to show you how to create a slick download button in Photoshop and then use it as a button sprite. We will also cover some basic CSS techniques to make this design fully functional.

Preview

This is the result that we are going to create. The button will have three conditions, normal, hover, and active. Click here or click image below to see its demo.

Make a Slick and Dark Button Sprite

Needed Resource

To follow this tutorial, you will need to grab this resource:

Step 1: Preparing Background

Start creating a new file with size 400 x 300 px. In Layers panel, click New Layer icon. Click Edit > Fill. Select #314052 for its color.

Make a Slick and Dark Button Sprite

Double click layer to open Layer Style dialog box. Add Layer Style Inner Glow and Pattern Overlay to add some noise. For the pattern, use one of the pixel patterns from PSDfreemium. Make sure to reduce its Opacity to 5%.

Make a Slick and Dark Button Sprite

Make a Slick and Dark Button Sprite

Here’s the result after adding Layer Style.

Make a Slick and Dark Button Sprite

Step 2: Make Normal Button

Activate rounded rectangle tool and set its radius to 30 px. Draw a rounded rectangle with color #131c27.

Make a Slick and Dark Button Sprite

Double click layer shape and add following Layer Styles.

Make a Slick and Dark Button Sprite

Make a Slick and Dark Button Sprite

This is the result.

Make a Slick and Dark Button Sprite

Step 3

Duplicate layer shape we have just created in Step 1 by pressing Ctrl + J. Change its color to #213143. Activate move tool. Hit up arrow 5 times to nudge it 5 pixels up.

Make a Slick and Dark Button Sprite

Step 4

Next, let’s add some shadows under the button. In Layers panel, Ctrl-click original layer shape to create a new selection based on its shape.

Make a Slick and Dark Button Sprite

Fill selection with black. Remove selection by pressing Ctrl + D. Soften the shadow by adding Gaussian Blur, click Filter > Blur > Gaussian Blur.

Make a Slick and Dark Button Sprite

Step 5

Ctrl-click top most layer shape. Create new group and then click Add Layer Mask icon. We will add highlights inside this group. Because we have add layer mask, everything we paint here will always stay inside the button.

Make a Slick and Dark Button Sprite

Use a big and soft brush to paint white on top of the button. Reduce its Opacity to 10%.

Make a Slick and Dark Button Sprite

Step 6

Activate pencil tool and set its brush size to 1 px. Paint 1 px white line on top of the button. Delete both its edges using a big and soft eraser tool.

Make a Slick and Dark Button Sprite

Repeat same porcess on its lower part.

Make a Slick and Dark Button Sprite

Step 7

Add text DOWNLOAD. Set its color to #dce4eb and add Drop Shadow.

Make a Slick and Dark Button Sprite

Make a Slick and Dark Button Sprite

Step 8: Make Hover Condition

Let’s organize the layer structure. Put all layers that created the button into a new group and name it normal. Duplicate group layer normal by Alt-dragging it. Rename the new group layer to hover. Change top shape color to #13202e.

Make a Slick and Dark Button Sprite

Step 9: Make Active Condition

Duplicate normal group layer by Alt-dragging it again.. Nudge top shape 3 px down by activating mve tool and then press down arrow 3 times.

Make a Slick and Dark Button Sprite

Step 10: Make Sprite Button

Hide all layers except normal group layer. Hit Ctrl + A to select all. Copy all pixels by pressing Ctrl + Shift + C.

Make a Slick and Dark Button Sprite

Step 11

Create new file in Photoshop. Don’t change the canvas size. Photoshop will automatically set new canvas size to the pixels we have just copied.

Make a Slick and Dark Button Sprite

Step 12

Click Image > Canvas Size. Set Height to 300 percent.

Make a Slick and Dark Button Sprite

Step 13

Hit Ctrl + V to paste the normal button. Place it on top of the canvas. Repeat this process for the other conditions. Make sure to sort place them just as in picture below.

Make a Slick and Dark Button Sprite

Step 14

Hide Background by clicking on eye icon in front of it. Click File > Save For Web & Devices. Make sure to select file type PNG-24 and check Transparency option. PNG-24 format allows you to store transparency and also store more color informations better than GIF.

Make a Slick and Dark Button Sprite

Step 15: Background

Use zoom tool to see the background details. Use rectangular marquee tool to create a 6 x 6 px selection. Save it to clipboard by pressing Ctrl + Shift + C.

Make a Slick and Dark Button Sprite

Step 16

Create new file with size 6 x 6 px.

Make a Slick and Dark Button Sprite

Paste the image, Ctrl + V. Save it as a PNG-24 file and name it background.png.

Make a Slick and Dark Button Sprite

Step 17: HTML

Open your favorite text editor. You can use any editor, basic editor such as Notepad is good enough. Paste these lines of code.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sprite Button</title>

</head>

<body>
<p><a href="#">Download</a></p>
</body>

</html>

Step 18: CSS

Below is the style used for the button sprite. This style is used right inside the HTML file. Explanation is inline as comment.

<style type="text/css">
body {
background: url(background.png);
/* Adding pixel pattern into main background */
}

.button {
background:url(web_button.png) no-repeat 0 0;
text-indent:-9999px;
/* Hide text "Download" off screen */
display:block;
width:170px;
height:67px;
/* Based on each button size */
}
a.button:hover, a.button:focus {
background-position: center;
/* Reveals center part of the sprite on hover and focus */
}
a.button:active {
background-position: bottom;
/* Reveals bottom part of the sprite when button clicked */
}
a {
outline: none;
/* Remove lines on button when active */
}
</style>

Final Result

Below is the end result. I hope you learn something new from this basic web design tutorial. Thank you for reading.

Make a Slick and Dark Button Sprite

Demo and Source File





نوع مطلب :
برچسب ها :
لینک های مرتبط :
 
لبخندناراحتچشمک
نیشخندبغلسوال
قلبخجالتزبان
ماچتعجبعصبانی
عینکشیطانگریه
خندهقهقههخداحافظ
سبزقهرهورا
دستگلتفکر


درباره وبلاگ

دراین وبسایت سعی میشود بهترین آموزش های فتوشاپ راتقدیم کاربران محترم

بنماید.آموزشهای این وبلاگ گزیده ای از بهترینها می باشد.
مدیر وبلاگ : abdollah khalili
نویسندگان
نظرسنجی
آیا ازمطالب وبسایت راضی هستید







جستجو

آمار وبلاگ
کل بازدید :
بازدید امروز :
بازدید دیروز :
بازدید این ماه :
بازدید ماه قبل :
تعداد نویسندگان :
تعداد کل پست ها :
آخرین بازدید :
آخرین بروز رسانی :


سیستم افزایش بازدید و محبوبیت پلاس viewer.add('http://www.k2cod.com/gallery/pic/01.jpg',' تصویر شماره یك'); viewer.add('http://www.k2cod.com/gallery/pic/02.jpg',' تصویر شماره دو'); viewer.add('http://www.k2cod.com/gallery/pic/03.jpg',' تصویر شماره سه'); viewer.add('http://www.k2cod.com/gallery/pic/04.jpg',' تصویر شماره چهار');
برای نمایش تصاویر گالری كلیك كنید


کد گالری

eXTReMe Tracker

statistics

تماس با ما

                    
 
 
سایت کسب درآمد عالی از اینترنت