مجموعه ای جذاب از دکمه های رسانه ای بسازید.

شنبه 5 آذر 1390

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

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

 

1- طرح( sketch )

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

 

2– شروع کار( crank up )

اکنون ایده را داریم. فتوشاپ را باز کرده و فایلی به ابعاد 1024 x 768 پیکسل باز می کنیم. در رزولوشن.(72dpi) این سایز به ما اجازه طراحی دکمه ها را خواهد داد. برای شروع قصد داریم دکمه ای برای لینک به سایت توییتر را بسازیم. سپس آن را مبنایی برای طراحی دیگر دکمه ها قرار خواهیم داد.

 

3- مستطیل گوشه گرد( Rounded rectangle )

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

 

4- جانمایی گرادینت( Gradient Overlay )

سپس بر مبنای رنگ بندی برند توییتر اقدام به انتخاب رنگ برای مستطیل خود می نماییم. layer style را بازکرده و جانمایی گرادینت را علامت دار می کنیم. رنگهای گرادینت را بر #0d6fb8 to #00c1dd گزینه تنظیم نموده و زاویه را در آن به 90 درجه تغییر می دهیم.

 

5- افزودن مقداری دانه رنگی( Add some grain )

سپس با استفاده از inner glow به دکمه خود طرح می دهیم. رنگ این گزینه را برابر با مقدار #0a5389 قرار گیرد. این باعث افزوده شدن حالت گرادینت خواهد شد. هدف فقط دیده شدن این بافت و نه جلب توجه کردن است. چرا که باعث گمراهی بیننده خواهد شد.

 

6– سرکش بروی گرادینت( Gradient stroke )

بااستفاده از مقادیر موجود برروی گرادینت میتوان ایجاد حالتی شبیه به سرکش نمود. در آپشن gradient fill type را با رنگ #1784d5 to #24e3ff استفاده نموده این کار باعث نمای بیشتر در بُعد دهی به دکمه خواهد شد. واین احساس را القا کرده که منبع نوری، از بالا به آن می تابد.

 

7– سایه زیرین( Drop Shadow )

مطلب بعدی که اضافه می شود سایه گذاری خواهد بود. این به دکمه کمک می کند به صورت راحت تر و دلپذیرتری بروی صفحه قرار گیرد. گرادینت شماره #000000 در اینجا استفاده شده است. درصد وضوح آن برروی 40% قرار گرفته است. فاصله بروی مقدار صفر تنظیم شده است. پهنا بروی 100% و سایز به اندازه 1 پیکسل مقارن شده است. این آخرین سبکی است که بروی مستطیل گوشه گرد اعمال میشود.

 

8– نتیجه کار تاکنون رضایت بخش بوده است؟ ( So far so good? )

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

 

9– اضافه شدن دایره ای بی نقص( A perfect circle )

در طرح من ایکن توییتر بر روی یک دایره می نشیند. این دایره را با استفاده از ابزار ellipse shape tool به اندازه 30 پیکسل بسازید. این به معنای آن است که ما هنوز 6 پیکسل به عنوان فضای باقی مانده بیرون از دایره در اختیار خواهیم داشت. در حالیکه این دایره بایستی به اندازه کافی فضا برای قرار گرفتن آیکن درون خود داشته باشد، آن را به روشی منسب در در مستطیل به حرکت دروره تا محل قرار گیری مورد رضایت شما باشد.

 

10– دایره را اضافه کنید( Inset the circle )

سبکهای استفاده شده را به دایره اضافه کنید تا آن حالتی هماهنگ با مستطیل گوشه گرد شما به خود بگیرد. با استفاده از پنجره layer style رنگ #0d6fb8 را انتخاب نموده و سایه ای به رنگ #24e2ff با فاصله 1 پیکسلی اعمال کنید.

 

11- سایه داخلی( Inner shadow )

اکنون به دایره، سایه داخلی اضافه کنید. این سایه با رنگ شماره #666666 و انتخاب گزینه multiply blend mode اعمال خواهد شد. فاصله را بر روی صفر پیکسل تنظیم کنید و اندازه را برابر با چهار پیکسل قرار دهید. این امر باعث می شود، دایره به مقادیر زیادی با مستطیل گوشه گرد، تطابق داشته باشد.

 

12– مقداری دانه بیشتر( Some more grain )

قصد دیگر ما اضافه کردن مقادیر بیشتری از تیرگی به دایره است. با استفاده از رنگ شماره 0b78b9، اقدام به اضافه کردن inner glow می نماییم. مقادیر را تنظیم کنید تا به میزان موردنظر برسد.

 

13– چیزی فراموش شده است! ( Something's missing! )

پنجره سبک ها را ببندید و وضعیت ظاهری دکمه را بررسی کنید. ظاهری خوبی دارد. اما هنوز کامل نیست. آیکن و متن! آیکن مورد نظر را در سند اصلی کپی کنید. آن را به میزان لازم تنظیم کرده تا به موقعیت دقیق و موردنظر در دایره برسد.

 

14– سایه زیرین آیکن( Icon drop shadow )

به آیکن سایه زیرین بیفزایید. منبع نور ما از بالای دکمه می تابد. بنابراین سایه بایستی زیر آیکن قرار داشته باشد. در پنجره سبک ها، رنگ سایه زیرین به شماره #444444 و مد multiply blend را به ایکن اضافه کنید. فاصله را در یک پیکسلی قرار دهید.

 

15– تقسیم کننده( Divider )

اکنون به یک تقسیم کننده نیاز داریم تا محدوده آیکن و متن را معین کند. با استفاده از ابزار مستطیل، شکلی به ارتفاع 40 پیکسل و عرض 1 پیکسل بسازید. layer fill را برابر 0% قرار دهید. سپس پنجره layer styles را باز کرده و مقدار #ffffff را transparent gradient overlay اضافه کنید و opacity را برابر 40% قرار دهید.

 

16– تکرار( Repeat )

قدم آخر را دوباره تکرار کنید رنگ گرادینت را#000000 و شفاف قرار دهید. هر دو مستطیل را دقیقاً در کنار هم قرار دهید. فاصله آنها را با دایره ای برابر که محتوی آیکن است تنظیم نمایید. از فاصله ها و دقت تنظیمات مطمئن شوید.

 

17– نوبت متن است( Time for the text )

هم اکنون زمان ایجاد یک text box بر روی برد و درج عبارت Follow me on twitter و رنگ #ffffff رسیده است. فونت را به Helvetica Neue توپر و سایز 16 پیکسل تغییر دهید. فاصله میان حروف آن برابر -10px باشد. سپس به تنظیم موقعیت متن در وسط مستطیل بپردازید. فاصله آن با تقسیم کننده از سمت راست برابر 10 پیکسل قرار دهید.

 

18- آرایش( Style it up )

متن از سبک آیکن توییتر پیروی می کند. بر روری آیکن توییتر راست کلیک کرده و گزینه "Copy Layer Style". را انتخاب کنید. اکنون بر لایه متن راست کلیک کنید و گزینه "Paste Layer Style" را فشار دهید. بااین کار تنظیمات سایه زیرین بین آیکن و متن هماهنگ می شوند.

 

19 – چرخش( Rollover )

چرخش دکمه ها در افزایش تجربه کاربران از اهمیت برخوردار است. چرخش های بی عیب می تواند تغییراتی شگرف در طرحها به وجود آرد! همه لایه باستثنای پس زمینه را انتخاب کنید. همگی را در پوشه ای به نام state1 گروهبندی کنید. سپس یک کپی از این گروه تهیه کرده، نام آن را hover بگذارید.

 

20– عمل برگردان و انتقال( Reverse and shift )

مستطیل گوشه گرد را در گروه hover انتخاب کنید. پنجره layer styles آن را باز کرده و گزینه reverse را علامت بزنید. گزینه ok و سپس کلیه لایه ها را 1پیکسل پایین آورید. گروه hover را یک بار فعال و غیر فعال کرده تا از عملکرد صحیح چرخش آن مطمئن شوید. انتقال 1 پیکسلی باعث حرکت مشابه در چرخش می شود.

 

21– پایان (Finished! )

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

 

 

 


راب همپسون
 
تعداد مقالات 1 عدد
حسن چلونگر
 
تعداد مقالات 243 عدد
       
کپی رایت

مقالات مرتبط: