یک رابط کاربر پسند ، گرافیک خوب ترسیم شده ، ترتیب صحیح عناصر موجود در صفحه - نیمی از موفقیت سایت با بازدید کننده. ترسیم دکمه ها برای یک وب سایت قسمت کوچکی اما مهم کار روی یک پروژه آنلاین است.
دستورالعمل ها
مرحله 1
سعی کنید یک دکمه گرد بکشید. روش ارائه شده در زیر نیز برای ایجاد آرم و آواتار جهانی است. رسم آن دشوار نیست ، علی رغم تعداد اقداماتی که باید انجام دهید.
گام 2
Adobe Photoshop را باز کنید. با فشار دادن ترکیب "Ctrl + N" سند جدیدی ایجاد کنید. پارامترهای تصویر 300 * 300 ، وضوح 72 ppi. حالت پیش فرض پس زمینه و رنگ به ترتیب سفید و RGB است.
مرحله 3
بهتر است با بردارها نقاشی کنید ، به طوری که وقتی دکمه کاهش می یابد ، کیفیت آن خراب نمی شود. ابزار Oval را انتخاب کنید ، Shift را نگه دارید و از مرکز یک دایره بکشید.
مرحله 4
اکنون برخی از افکت ها را به دایره حاصل اعمال کنید. به منوی "Layers" - "Layer Style" - "Blending Options" بروید. در اینجا شما باید یک شیب اعمال کنید.
مرحله 5
بعد ، در اینجا ، جعبه کنار "Embossing" را علامت بزنید تا دکمه برآمدگی لازم را داشته باشد و پارامترهای زیر را تنظیم کنید: سبک - برجستگی رئوس مطالب ، روش - برش نرم ، عمق - 220٪ ، اندازه - 1 پیکسل ، نرم - 5 پیکسل ، زاویه - 135 درجه بدون روشنایی جهانی ، ارتفاع - 32 ، حالت برجسته - طبیعی با 30٪ تیرگی ، حالت سایه - ضرب با 25٪ تیرگی
مرحله 6
برای دادن حجم بیشتر ، در اینجا در پارامترهای ترکیب ، کادر "سایه" را علامت بزنید و پارامترهای زیر را تنظیم کنید: حالت ترکیب - ضرب ، شفافیت - 40٪ ، زاویه - 125 درجه با استفاده از روشنایی جهانی ، جابجایی - 5 پیکسل ، اندازه - 20 پیکسل.
مرحله 7
نتیجه اقدامات انجام شده چنین تصویری خواهد بود که در شکل نشان داده شده است.
مرحله 8
حالا یک لایه جدید ایجاد کنید ، دوباره "Oval" را انتخاب کنید و یک دایره با شعاع کوچکتر از شکل اول بکشید. "گزینه های ترکیب" را باز کنید ، کادر کنار "Inner Shadow" را علامت بزنید و پارامترها را تنظیم کنید: Blending Mode - Soft Light، Angle - 125o، Offset - 0px، Shrink - 45٪، Size - 21px.
مرحله 9
بعد ، در اینجا در گزینه های ترکیب ، "Gradient overlay" را علامت بزنید و یک شیب با پارامترها مانند تصویر ایجاد کنید. تأیید را کلیک کنید
مرحله 10
بعد Blending Style را روی Radial ، Scale روی 124٪ تنظیم کنید
مرحله 11
اکنون کادر "Stroke" را علامت بزنید و پارامترهای زیر را تنظیم کنید: اندازه - 5 پیکسل ، موقعیت - خارج ، حالت ترکیب - طبیعی ، تیرگی - 100٪ ، نوع ضربه - شیب
مرحله 12
در نتیجه این اقدامات ، باید چیزی بدست آورید که بیشتر شبیه دکمه باشد. می توانید گزینه های ترکیب را دوباره باز کرده و با آنها آزمایش کنید.
مرحله 13
اکنون باید دکمه های هایلایت را اضافه کنیم تا دکمه بافت شیشه ای به خود بگیرد. برای این کار ، دوباره یک لایه جدید ایجاد کنید ، ابزار Oval Selection را انتخاب کنید ، یک بیضی شکل بالای دکمه ایجاد کنید و با استفاده از ابزار Fill آن را با رنگ سفید پر کنید. Ctrl را نگه دارید ، روی لایه با دایره رنگی کلیک کنید ، انتخاب را معکوس کنید ("Selection" - "Inversion"). اکنون Delete را فشار دهید. بیضی باید در اطراف محیط دایره اصلاح شود.
مرحله 14
در پانل لایه ها ، گزینه Normal را به Soft Light تغییر دهید ، سپس بر روی نماد vector mask کلیک کرده و Fill Tool - Gradient را پر کنید. هایلایت را از پایین به بالا پر کنید. دکمه تقریباً آماده است.
مرحله 15
می توانید یک کتیبه به دکمه اضافه کنید. همچنین می توانید جلوه های ترکیبی مانند درخشش داخلی ، گرادیان و غیره را روی آن اعمال کنید. از آزمایش نترسید ، هرچه از تخیل بیشتری در کار خود استفاده کنید ، سریعتر به خود ویرایشگر و طراحی وب تسلط خواهید یافت.
