سلام خدمت دوستان عزیز
در این آموزش یاد می گیریم که چطوری یک دکمه زیبا و جذاب در فتوشاپ بسازیم و سپس آن را به صورت کد اچ تی ام ال و سی اس اس در بیاریم و از آن در طراحی وب استفاده کنیم .
رنگ دکمه رو هر رنگی که خواستید می تونید انتخاب کنید. و همینطور از هر روشی که دوست داشتید و براتون راحت تر بود می تونید رنگش کنید واسه اینکه خیلی چیز مهمی نیست دیگه نحوه رنگ کردن دکمه رو داخل آموزش نمی ذارم دیگه. ولی در این آموزش رنگ مهم نیست چون می خوام بهش یک استایل قشنگ بدم.
5.دوباره با همون اندازه و مشخصات Shape قبلی ، یک دکمه دیگه دقیق پایین اون خط وسط که ارتفاع رو نصف کرده ایجاد می کنیم.
خب تبریک می گم ، کار ما در ساختن دکمه با فتوشاپ تموم شد ، این تصویر رو از طریق Save for Web & Devices… با هر فرمتی که دوست دارید و با هر اسمی که دوست دارید ( ما اینجا با Button-bg ذخیره کردیم ) ذخیره کنید تو فولدر پروژتون که می خواهید فایل استایل “CSS” و اچ تی ام التون رو اونجا بذارید.
مراحل نوشتن کد این دکمه :
در این آموزش یاد می گیریم که چطوری یک دکمه زیبا و جذاب در فتوشاپ بسازیم و سپس آن را به صورت کد اچ تی ام ال و سی اس اس در بیاریم و از آن در طراحی وب استفاده کنیم .
قطعا همه شما دوستان در بسیاری از سایت در منوی اون سایت ها یا جاهای دیگر دکمه های قشنگی رو دیدید که وقتی با موس روی آنها می رویم شکل و رنگ آنها عوض میشه که یک حالت خاص و قشنگی رو به اون میده. ما هم در این آموزش طراحی این نوع دکمه ها و چگونه استفاده کردن آنها در طراحی سایت به وسیله اچ تی ام ال و سی اس اس یاد می دیم.
خب اول به فتوشاپ می رویم تا این دکمه رو بسازیم.
1.عرض دکمه ای که در نظر دارم 250پیکسل هست و ارتفاعش هم 50 پیکسل ولی چون می خواهیم یک دکمه دیگه با همین ابعاد زیرش بسازیم تا بتونیم بعداً در کُدها بهش اون حالت Rollover رو بدیم ، به اندازه ارتفاع یک دکمه دیگه هم اضافه می کنیم یعنی 100پیکسل.
2. خب باید حالا به وسیله خط کش های راهنمایی که در فتوشاپ هست ، این طرح رو از ارتفاع نصف کنیم که یک دکمه بالا و یک دکمه پایین باشه.یعنی باید تا 50پیکسل یک خط کش رو پایین بیاریم. اگه این خط کش های راهنما در فتوشاپ شما نیستن ، برای نشان دادن آنها از کلیدهای CTRL+R استفاده کنید.
3. این مرحله ، مرحله ای است که شکل دکمه رو با کمک Shape فتوشاپ می کشیم. که ما اینجا از شکل گوشه گرد با انهنای گوشه 3px استفاده می کنیم. ( و این اختیاری است شما هر شکل دوست داشتید می تونید استفاده کنید.)
4. در این مرحله که می خواهیم شکل رو رسم کنیم ، برای اینکه دقت کار بالا بره ما یک سایز ثابت رو برای دکمه انتخاب می کنیم ( مطابق شکل ) که همون 250px X 50px هست.
رنگ دکمه رو هر رنگی که خواستید می تونید انتخاب کنید. و همینطور از هر روشی که دوست داشتید و براتون راحت تر بود می تونید رنگش کنید واسه اینکه خیلی چیز مهمی نیست دیگه نحوه رنگ کردن دکمه رو داخل آموزش نمی ذارم دیگه. ولی در این آموزش رنگ مهم نیست چون می خوام بهش یک استایل قشنگ بدم.
5.دوباره با همون اندازه و مشخصات Shape قبلی ، یک دکمه دیگه دقیق پایین اون خط وسط که ارتفاع رو نصف کرده ایجاد می کنیم.
6. حالا می رسیم سر استایل دادن و قشنگ کردن دکمه
! فعلاً روی لایه بالایی که همون دکمه بالایی هست کار می کنیم تا برسیم به دکمه پایینی. خب همونطور که می دونید برای اینکه وارد قسمت تنظیمات استایل بشیم یا روی لایه راست کلیک کنید و Blending Options رو انتخاب کنید یا راحت تر روی همون لایه دابل کلیک کنید. در قسمت Gradient Overlay تنظیمات زیر را ایجاد کنید :
7. این هم نتیجه :
8. حالا در همون تنظیمات لایه ، به Stroke می رویم و تنظیمات زیر را ایجاد می کنیم .
9. برای این که یک افکت براق شیشه ای روی دکمه بندازیم از یه رنگ کمرنگ تر از خودش یک Gradient روش می کشیم . شما ابزار Gradient رو از توی فتوشاپ انتخاب کنید و برای تنظیمات رنگش این رنگ ها رو ایجاد کنید :
10. سپس حالت گرادینت خودمون رو Radial انتخاب می کنیم .
11.حالا کلید Shift را بگیرید تا گرادینت صاف و بدون انهنا و دقیق باشد و از بالای دکمه تا 30پیکسل پایین تر از خط وسط بکشید .
12. حالا می رسیم به لایه پایینی ! مثل همون لایه بالا به Blending Options میایم تا استایل ها رو اعمال کنیم. قسمت اول کارمون هم همون Gradient Overlay هست همچنان
تنظیمات رو مانند شکل زیر اعمال کنید .
13. سپس می رسیم به Stroke ! اون رو هم مانند شکل زیر درست کنید :
14. خب دو تا دکمه ما الآن آماده هستن . شما می تونید هر چی خواستید روش بنویسید و هر استایل و شکل و شمایلی که خواستید بهش بدید ، منم عنوان وبلاگ رو گذاشتم
15. برای لایه پایینی هم یک نوشته ترجیحاً با رنگی متفاوت می گذاریم ولی باید دقیقاً همون جایی از نظر مختصات و اینا باشه که نوشته لایه بالایی هست تا وقتی که حالت Rollover که با موس روی دکمه می ریم نشون داده میشه ، زشت نشه!
خب تبریک می گم ، کار ما در ساختن دکمه با فتوشاپ تموم شد ، این تصویر رو از طریق Save for Web & Devices… با هر فرمتی که دوست دارید و با هر اسمی که دوست دارید ( ما اینجا با Button-bg ذخیره کردیم ) ذخیره کنید تو فولدر پروژتون که می خواهید فایل استایل “CSS” و اچ تی ام التون رو اونجا بذارید.
مراحل نوشتن کد این دکمه :
1. خب برای اچ تی ام ال کد خیلی ساده ای استفاده می کنیم تا فقط بتونیم این تکنیک Rollover رو یاد بگیریم و بفهمیم جریانش چیه برای همین لینک رو در یک تگ p یا همون پاراگراف می ذاریم.
و این هم کد کامل اچ تی ام ال ما که شما در نسخه ای که براتون برای دانلود می ذارم مشاهده خواهید کرد:
2. خب حالا می رسیم سر وقت CSS خب اینجا یکی دو تا از تکنیک های سی اس اس که اینجا استفاده کردم رو براتون توضیح می دم که دلیلشو بفهمید. اول اینکه اون text-indent که گذاشتم با مقدار -9999 پیکسل ، این کاری می کنه که اون جمله " کلیک کنید " که ما در اچ تی ام ال برای دکمه قرار دادیم ناپدید بشه و فقط عکس رو نشون بده. و در کلاس .button a هم outline : none رو استفاده کردیم که این خاصیت سی اس اس خطوط خاکستری دورش رو در مرورگرهای نسل موزیلا حذف می کنه و در .button a:hover هم مشاهده می کنید که ما این مقدار رو ایجاد کردیم background-position : 0 -50px که این بکگراند رو به 50پیکسل پایین تر منتقل می کنه و برای ما اون دکمه پایینی نمایان میشه . در پایین کد کامل سی اس اس رو مشاهده می کنید :
خب دیدید ؟ به همین راحتی تکنیک جالبی رو یاد گرفتیم و از این به بعد می تونیم در طراحی هامون ازش استفاده کنیم. برای ساختن تصاویر و لینک های Rollover تکنیک های دیگری هم هست به طور مثال ما در این آموزش با عوض کردن جای بکگراندمون که همون عکس دکمه هست در حالت hover یعنی وقتی که موس روش میاد ، این رو ایجاد کردیم . یکی دو تا تکنیک دیگه هم هست که انشالله اونها رو هم انشاالله در سری های بعد قرار می دم.
موفق و پیروز باشید
کد:
<p><a href="#null">کلیک کنید</a></p>و این هم کد کامل اچ تی ام ال ما که شما در نسخه ای که براتون برای دانلود می ذارم مشاهده خواهید کرد:
کد:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Rollover Menu!</title>
</head>
<body>
<p><a href="#null">کلیک کنید</a></p>
&copy; By <a href="http://www.DANG3R.us/">DANG3R</a>
</body>
</html>2. خب حالا می رسیم سر وقت CSS خب اینجا یکی دو تا از تکنیک های سی اس اس که اینجا استفاده کردم رو براتون توضیح می دم که دلیلشو بفهمید. اول اینکه اون text-indent که گذاشتم با مقدار -9999 پیکسل ، این کاری می کنه که اون جمله " کلیک کنید " که ما در اچ تی ام ال برای دکمه قرار دادیم ناپدید بشه و فقط عکس رو نشون بده. و در کلاس .button a هم outline : none رو استفاده کردیم که این خاصیت سی اس اس خطوط خاکستری دورش رو در مرورگرهای نسل موزیلا حذف می کنه و در .button a:hover هم مشاهده می کنید که ما این مقدار رو ایجاد کردیم background-position : 0 -50px که این بکگراند رو به 50پیکسل پایین تر منتقل می کنه و برای ما اون دکمه پایینی نمایان میشه . در پایین کد کامل سی اس اس رو مشاهده می کنید :
کد:
* {
margin:20px auto;
padding:0;
}
body {
font-family:tahoma;
text-align:center;
}
.button {
display:block;
width:250px;
height:50px;
text-indent:-9999px;
}
.button a {
display:block;
width:100%;
height:100%;
background:transparent url(button-bg.jpg) no-repeat top left;
outline:none;
}
.button a:hover {
background-position: 0 -50px;
}خب دیدید ؟ به همین راحتی تکنیک جالبی رو یاد گرفتیم و از این به بعد می تونیم در طراحی هامون ازش استفاده کنیم. برای ساختن تصاویر و لینک های Rollover تکنیک های دیگری هم هست به طور مثال ما در این آموزش با عوض کردن جای بکگراندمون که همون عکس دکمه هست در حالت hover یعنی وقتی که موس روش میاد ، این رو ایجاد کردیم . یکی دو تا تکنیک دیگه هم هست که انشالله اونها رو هم انشاالله در سری های بعد قرار می دم.
امیدوارم از این آموزش لذت برده باشید و جاییش براتون نامفهوم نباشه
در دو لینک زیر می تونید دموی این کار رو مشاهده کنید و هم سورس این کار + فایل پی اس دی که ما کار کردیم رو دانلود کنید.
موفق و پیروز باشید