ساخت دکمه به سبک دکمه های Mac

Soldier

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

پیش گفتار :

نام آموزش : دکمه های Mac
سطح : مقدماتی
مترجم : علی اسعدی
منبع : Good-tutorials.com
توضیح نگارنده : شما در این آموزش یاد می گیرن بتونید در مراحلی کوتاه یک دکمه با Style مکینتاش برای صفحه وبتون طراحی کنید .

آموزش :

1- یک لایه جدید بسازید سپس با کمک ابزار Rectangle Marquee یک مستطیل با 12 پیکسل قطر (
pixel radius 12 ) بکشید داخل ان را با رنگی پر کنید , سپس روی این راست کلیک کرده و ان را Raterize کنید .

2- حال به Blending Option بروید و در آن جا یک Gradient Overlay ایجاد کنید با رنگ های : e6e9e2 to #ffffff#

2.jpg



3- در قدم بعدی در همان منوی Blending Option یک استورک ایجاد می نماییم با رنگ b7b7b7 و طبق تنظیمات زیر :

3.jpg


4- ما الان باید یه همچین شکلی داشته باشیم :

4.jpg


5- حالا در حالتی که دکمه Ctrl را نگه داشته ایم روی لایه شکلمان کلیک می کنیم سپس به مسیر Select > Modify > Contract میرویم و آن را روی 1 پیکسل می گذاریم ؛ داخل اون رو با هر رنگی پر می کنیم و سپس آن را با کلید میانبر Ctrl+D از حالت انتخابی خارج می کنیم .

5.jpg


6- انباشته شدن رنگ در لایه ( Fill ) رو روی 0% می گذاریم

6.jpg

7- یک استورک جدید با رنگ سفید روی کارمان اضافه می کنیم و میزان نور ( Opacity ) رو روی 60% میگذاریم .
7.jpg


- دکمه شما دیگر آماده است و حالا شما می توانید روی این دکمه ای که خودتان ساخته اید متنی تایپ کنید و از آن توی صفحه وبتان استفاده کنید .

mac-style-web-button.jpg




امیدوارم این آموزش تونسته باشه که برای بچه ها مفید باشه . :wink:

اگه سوتی ، اشکال لوپی تو آموزش دیدن بگین تا حتماً اصلاح کنم . ( خودم که چیزی ندیدم ) . :sad:
 

AhadGD

Well-Known Member
آفرين علي جان اين يكي دكمه هم به آرشيو دكمه ها اضافه شد خيلي خوب بود...
 

echessdesign

مدیر انجمن طراحی وب
درود بر شما
سپاسگزارم از آموزش جذاب شما، منوهای سایت Apple.com رو ضمیمه کردم.
اگر توجه کنید، متونی که نوشته شده، در زیر آن، رنگ سفید وجود دارد (انگار که متون حک شده اند.) چگو نه می توان این افکت را بوجود آورد؟ (در ضمیمه اول عکس آن قرار داده شده است).
پس از آنکه موس بر روی لینک می رود، متونی به شکلی که تصور شود به داخل فرورفته ظاهر میشوند. از چه افکتی استفاده شده؟ (در ضمیمه دو، عکس آن قرار داده شده).
پیشاپیش از راهنمایی شما سپاسگزارم.
 

پیوست ها

  • mac.jpg
    mac.jpg
    14.5 کیلوبایت · بازدیدها: 19
  • macover.jpg
    macover.jpg
    13.5 کیلوبایت · بازدیدها: 13

echessdesign

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

Soldier

Member
بفرما عزیز این فایل پیوست رو بگیر ببین خوبه یا چطوری باشه بیشتر به کارت میاد
10.gif
 

پیوست ها

  • ECHESSDESGING.psd
    184.4 کیلوبایت · بازدیدها: 15

جدیدترین ارسال ها

بالا