بهترین های آموزش با ♥کامپیوترگل♥آموزش طراحی وب و چترومطراحی و ساخت چتروم،آموزش1تا100کامپیوتر،طراحی سایت،برنامه نویسی،دانلود نرم افزارهای اندروید و کامپیوتر،هک و امنیت

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

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

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

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

برنامه فتوشاپ را باز کنید و یک سند جدید ایجاد کنید. پس زمینه را رنگ خاکستری پر کنید و ناحیه وسط را توسط یک براش نرم ، با رنگ سفید مانند شکل روشن تر کنید . یک لایه جدید ایجاد کنید و در آن یک مستطیل با گوشه های گرد به شعاع 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 پیکسل جابجا میکنیم.

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

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