آموزش طراحی دکمه سه بعدی با فتوشاپ، CSS و HTML

در این آموزش یک دکمه زیبا را ابتدا قدم به قدم در فتوشاپ طراحی کرده و سپس دکمه گرافیکی طراحی شده را به صورت کاملا" عملی برای استفاده در صفحات وب سایت توسط HTML و CSS پیاده سازی کنیم. برای اینکه یک دکمه سه بُعدی با ظاهری واقعی داشته باشیم ، در طراحی به جزئیات نیز پرداخته میشود. کلیه مراحل به صورت تصویری و به ساده ترین نحوه بیان شده است. در این آموزش با تکنیک هایی در فتوشاپ و CSS آشنا خواهید شد که میتوانید از آنها در تمام پروژه های طراحی وب بهره بگیرید.

مشاهده نمونه کامل دکمه ساخته شده توسط فتوشاپ ، CSS و HTML

View the CSS button demo

این دکمه سه وضعیت دارد : در حالت عادی رنگ داخلی متن دکمه آبی است و هنگامی که ماوس روی آن قرار میگیرد متن دکمه بنفش خواهد شد ، با فشردن دکمه یک افکت طبیعی به آن اعمال می شود که دکمه همانند یک دکمه فشرده شده در دنیای واقعی به نظر میرسد.

بخش اول : طراحی ظاهر دکمه در فتوشاپ

برنامه فتوشاپ را باز کنید و یک سند جدید ایجاد کنید. پس زمینه را رنگ خاکستری پر کنید و ناحیه وسط را توسط یک براش نرم ، با رنگ سفید مانند شکل روشن تر کنید . یک لایه جدید ایجاد کنید و در آن یک مستطیل با گوشه های گرد به شعاع 10پیکسل رسم کنید.

روی لایه دوبار کلیک کنید تا پنجره Layer Style باز شود. بخش Gradinet Overly را انتخاب کنید. روی نوار رنگ گرادینت کلیک کنید و با وارد کردن شماره رنگهای #0730a5 و #a4c9f3 رنگ شروع و پایان گرادینت را مشخص کنید. سپس مقدار Angel را برابر با 90 قرار دهید.

برای اینکه دکمه سه بعدی تر به نظر برسد، باید برای آن یک سایه داخلی ایجاد کرد.بنابراین به بخش Inner Shadow در همین پنجره رفته و مقدار Distance را برابر با 2 پیکسل و مقدار Size را برابر با 9 پیکسل قرار دهید. برای رنگ سایه نیز مقدار #d9f7ff را وارد نمایید.

به بخش Stroke در همین پنجره رفته و یک خط حاشیه نازک و مناسب با سایز 1 پیکسل و رنگ #8eb4f2 ایجاد نمایید.

در پایان با استفاده از امکان Drop Shadow یک حاشیه روشن به ضخامت 1 پیکسل در پایین دکمه ایجاد میکنیم . برای اینکار به بخش Drop Shadow رفته و در بخش تنظیمات مقدار Opacity را برابر با 100% ، مقدار Angel را برابر با 90 ، Distance را برابر با 1 پیکسل و Size را برابر با 0 پیکسل قرار دهید.برای رنگ نیز مقدار #4285bd را وارد نمایید.

یک لایه جدید زیر لایه دکمه کنونی ایجاد کنید و در آن یک مستطیل دیگر رسم کنید.مستطیل جدید را طوری مانند زیر دکمه قرار دهید که از قسمت های کناری و بالا دقیقا" مماس با دکمه باشد اما از لبه پایین دکمه مانند شکل بیرون زده باشد.

مانند دکمه قبلی با دوبار کلیک روی این لایه جدید به بخش Gradient Overly رفته و یک گرادینت با رنگ های #174994 و #3c64bf ایجاد کنید. برای واقعی تر شدن دکمه ، همانند شکل کمی وسط تر نیز دو گرادینت با رنگ های روشن تر نسبت به رنگ های بیرونی ایجاد کنید.

برای این لایه یک حاشیه با رفتن به قسمت Stroke ایجاد کنید. سایز را برابر با 1 پیکسل و رنگ آن را برابر با #315a99 قرار دهید.مقدار Position را نیز برابر با Center بگذارید.

در آخر برای اینکه دکمه ملموس تر به نظر برسد ، یک سایه نرم توسط امکان Drop Shadow ایجاد میکنیم .برای این منظور به قسمت Drop Shadow رفته و مقدار Opacity را برابر با 30% ، مقدار Distance را 5 پیکسل و مقدار Size را برابر با 18 پیکسل قرار دهید.

ابزار متن را انتخاب کنید و یک نوشته دلخواه روی دکمه بنویسید . سپس مانند لایه های پیشین روی لایه متن دوبار کلیک کرده و پس از باز شدن پنجره Layer Style ، به بخش گرادینت رفته و یک گرادینت با رنگ های #3062ae و #557ac9 بر روی این متن ایجاد کنید.

برای طبیعی تر شدن و هماهنگی متن با دکمه باید یک سایه داخلی برای آن ایجاد کنیم. به بخش Inner Shadow رفته و در تنظیمات مقدار رنگ را برابر با #5c8fdf ، مقدار Opacity را برابر با 100% ، Distance را 3پیکسل و Size را برابر با 4پیسکل قرار دهید.

این بخش را با اضافه کردن مقداری برجستگی به پایید دکمه به پایان میر سانیم . برای این منظور به بخش Drop Shadow رفته و مقدار Blend Mode را Normal ، رنگ را #8eb4f2 ، Opacity را 100% ، Angel را 90 ، Distance را 1 پیکسل و Size را نیز 1 پیکسل قرار دهید.

در پالت لایه ها ، یک گروه ایجاد کنید و تمامی لایه هایی که تا کنون ساختیم را در این گروه قرار دهید.سپس روی گروه راست کلیک کنید و با کلیک روی گزینه Duplicate Group از آن یک کپی بگرید. کلید کنترل (Ctrl) روی کیبورد را پایین نگه داشته و روی لایه متن دکمه با ماوس کلیک کنید تا اطراف متن به حالت انتخاب درآید. سپس در حالی که اطراف متن در حالت انتخاب است یک لایه جدید ایجاد کنید. به بخش انتخاب رنگ در جعبه ابزار رفته و رنگ آنرا برابر با بنفش به شماره #6 c3a9c قرار دهید.سپس کلید Alt را گرفته و همزمان کلید Backspace را فشار دهید تا قسمت در حال انتخاب با رنگ بنفش پر شود .با اینکار متن با رنگ بنفش در لایه ایجاد شده ، قرار میگیرد.کلید Ctrl+D را فشار دهید تا متن از حالت انتخاب خارج شود.

در پالت لایه ها ، در حالی که این لایه را انتخاب کرده اید ، در بالای پالت Blending Mode را برابر با Color قرار دهید. این لایه برابر زمانی است که نشانگر ماوس روی دکمه قرار میگیرد و متن دکمه بنفش خواهد شد.

مجددا" از گروه لایه ها کپی بگیرید.این نسخه از کپی برای زمانی است که دکمه فشرده می شود. لایه ای از دکمه را که مربوط به سطح روی دکمه است انتخاب کنید و کمی آن را به سمت پایین حرکت دهید تا شکل فوق بدست آید.

حالا لایه تیره رنگی را که پس از حرکت لایه روی دکمه به سمت پایین ، از بالای آن بیرون زده است را مشاهده مکنید. بخش بالایی آن لایه را انتخاب کنید و با حرکت دکمه های کیبورد (Nudge) آنرا تا جایی که مجددا" زیر دکمه پنهان شود و لبه های آن با لبه بالایی دکمه منطبق شود ، به سمت پایین حرکت دهید.

در این مرحله پس زمینه را مخفی کنید . گروه اول لایه ها را که مربوط به دکمه در حال عادی می باشد در حالت مرئی باقی بگذارید و سایر گروه ها را نیز مخفی کنید. اطراف تصویر را به حالت انتخاب در آورید و کلید های Ctrl+Shift+E را همزمان فشار دهید تا لایه ها با هم ادغام شوند و یک تصویر یک لایه ای از دکمه در حالت عادی داشته باشیم . این کار را برای 2 گروه دیگر نیز تکرار کنید. برای اینکار در هر لحظه فقط گروهی را که میخواهید لایه های آن ادغام شوند در حالت مرئی باقی بگذارید.

هر سه دکمه را در یک سند جدید کپی کنید و آنها را در سه ناحیه کاملا" مساوی مانند شکل قرار دهید.برای این کار میتوانید از خط کش ها کمک بگیرید. در پایان این تصویر را با فرمت PNG-24 و به صورت transparency (بدون پس زمینه) ذخیر کنید.

بخش دوم : کدهای HTML

همانطور که مشاهده میکنید ، فایل html با خط DOCTYPE آغاز می شود که برای تعیین نوع فایل می باشد. پس از آن کدهای html در بین تگ html نوشده میشوند.در بخش head صفحه ، عنوان صفحه را توسط تگ title مشخص میکنیم و سپس به فایلی که کدهای css برنامه در آن نوشته شده است لینک میدهیم . در تگ body برای اینکه عناصر را در وسط صفحه نگهداری کنیم ، از یک تگ div استفاده کرده ایم که خصوصیات آنرا در بخش css درج خواهیم کرد. در بین تگ div یک عنصر a که کلاس btn به آن نسبت داده شده است قرار میدهیم ، این لینک پس از تعیین خصوصیات ظاهری آن در css توانایی نمایش دکمه طراحی شده را خواهد داشت .

بخش سوم : کدهای CSS

در ابتدای کد css مقادیر پیش فرض مرورگرها که باعث کمی فاصله از حاشیه و خطوط حاشیه می شود را با قرار دادن مقدار صفر حذف میکنیم .سپس پس زمینه را با رنگ خاکستری پر می کنیم . در ادامه عنصر div را که نگهدارنده عناصر در وسط صفحه می باشد تنظیم میکنیم و پس زمینه ای را که برای دکمه در نظر گرفته ایم در آن قرار میدهیم .

a.btn به تگ a اشاره می کند که دارای class با عنوان btn است. در ابتدا این لینک به یک بلاک تبدیل میشود تا بتوان به آن طول و عرض اختصاص داد.این طول و عرض نواحی کلیک پذیر این لینک را مشخص میکنند و با قرلر دادن تصویر دکمه در پس زمینه آن ، دکمه به وجود می آید. ارتفاع دکمه باید به اندازه ارتفاع یک دکمه تعین شود تا در هر لحظه فقط یکی از حالت ها نشان داده شود .خصیصه text-ident باعث میشود متن لینک از روی تصویر به یک طرف رانده و در نتیجه متن دکمه مخفی شود.

تگ a دارای چهار وضعیت است که میتوان برای هر وضعیت یک پس زمینه قرار داد.این 4 حالت عبارتند از : active ، hover ، focus و visited . نحوه کار بدین صورت است که در هرکدام از وضعیت ها ، تصویر پس زمینه مناسب را با تغییر موقعیت برای تگ a تنظیم می کنیم . مثلا" چنانچه فاصله تصویر دکمه فشرده شده از تصویر در حالت اولیه 248 پیکسل باشد ، هنگامی که دکمه فشرده میشود ، تصویر پس زمینه آن را 248 پیکسل جابجا میکنیم.

نمایش نهایی دکمه

View the CSS button demo

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

نظرات (18) -

  • محسن

    09/05/1390 07:57:51 ق.ظ | پاسخ به این نظر

    سلام.

    اگر ممکنه فایل PSD این آموزش رو بذارید تو سایت برای دانلود.

    • Admin

      09/06/1390 02:58:35 ق.ظ | پاسخ به این نظر

      محسن جان متاسفانه سورس PSD این آموزش رو ندارم چون این دکمه به این بزرگی فقط برای آموزش مناسبه و قطعا برای استفاده در سایت، شما باید سایز مناسب  بسازید. ساختش خیلی وقت نمیبره.

  • محسن

    09/05/1390 08:01:11 ق.ظ | پاسخ به این نظر

    یه ابهامی من دارم.

    همون ابتدای کار فرمودین یه سند جدید باز کنیم. ابعد سند چقدر باشه؟

    در مورد اون مستطیل مشکی رنگ هم که ابتدای اموزش وجود داره، هم توضیح بدید.

    یک دور سطحی مطلب رو خوندم البته.

    • Admin

      09/06/1390 02:52:05 ق.ظ | پاسخ به این نظر

      سطحی مطلب رو می خوانید همین میشه دیگه Smile شوخی میکنم :
      محسن جان ابعاد سند مهم نیست چون هدف اینه که وسط این سند یه دکمه با سایز دلخواهتون بعد از ای آموزش بسازید.
      اون مستطیل مشکی رنگ هم همون دکمه بدون افکت هست که ابتدای کار با ابزار رسم مستطیل گوشه گرد، رسم میکنیم.

  • باس

    10/07/1390 03:56:25 ق.ظ | پاسخ به این نظر

    قشنگ بید
    من می خوام رو دکمه تو html لینک بزارم دارم دیوونه میشم چطور باید این کارو بکنم

  • حسین

    11/19/1390 08:03:52 ق.ظ | پاسخ به این نظر

    سلام.
    خیلی سایت مفید و خوبی دارید.
    مخصوصا طرز آموزشتون خیلی ساده و خوبه
    آفرین به شما. موفق باشید

    • Admin

      11/19/1390 10:48:16 ق.ظ | پاسخ به این نظر

      مرسی حسین جان، خوشحالم که مطالب مفید واقع شده...
      راستی تو وبلاگت گفته بودی اگر نظر و پیشنهاد دارید بگید:
      پیشنهاد میکنم اون alert خوش آمدگویی رو بردارید چون یه نکته منفی هست و کلا نباید کاربر رو با نمایش پنجره های ناخواسته آزاد داد.
      موفق باشید...

  • مهدی

    12/18/1390 08:48:20 ب.ظ | پاسخ به این نظر

    مرسی از آموزشت مهندس جان
    فقط اگه این کد پست صفحات سایتت رو برداری تا بتونیم مطالب رو کپی کنیم واسه خودمون عالی میشه. اینجور با دایل آپ عاجز میشیم والا. اینجوری دیگه به pdfهم نیاز نیست.
    در کل ممنونم

  • حسین

    03/11/1391 06:34:12 ب.ظ | پاسخ به این نظر

    اقا ایول. کلی دنبال این میگشتم. خدا خیرت بده

  • hasan

    03/17/1391 11:44:52 ب.ظ | پاسخ به این نظر

    سلام
    آموزش ها خیلی به زبان ساده و قابل فهم بیان شده
    یک خسته بباشید و تشکر کمترین کاره که میشه کرد.
    راستی خواستم عضو خبر نامه بشم اما نشد
    موفق باشید..

  • pouria

    10/13/1391 07:48:30 ب.ظ | پاسخ به این نظر

    درود
    خواهش میکن نحوه استفاده از قالب psd برای ساخت سایت هم بگید

  • حسین

    01/15/1392 07:29:00 ب.ظ | پاسخ به این نظر

    سلام باتشکر از زحمات شما
    شمار رو لینک میکنم

  • Mahdiyeh

    02/04/1392 05:01:41 ب.ظ | پاسخ به این نظر

    منم میخوام مثل بچه های دیگه که تشکر کردند، ازتون تشکر کنم خیلی خیلی مفید و خوب بود، یه دنیا ممنون
    انقد که از این سایت مطلب یادگرفتم ، از استاد های بی سواد دانشگاه مون چیزی یاد نگرفتم

  • زهرا

    09/21/1393 10:11:34 ب.ظ | پاسخ به این نظر

    وای دانلود شد یه دنیا ازت ممنونم نمیدوم باید چی بگم واقعا ممنونم  اسم وبت رو میزارم توی لینکای وبم و به  عنوان بهترین وب ازش یاد میکنم
    این ادرس وبمهzaharan.blogfa.com

Loading