چگونگی ایجاد آیکون ناوبری تخت در Adobe Photoshop

آموزش طراحی سایت

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

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

ابزار مستطیل گرد را استفاده کنید و شکل جدیدی با ابعاد 1736 پیکسل 1736 پیکسل ، شعاع 83 پیکسل ، رنگ # 82d8b5 ایجاد کنید (یا رنگ خود را برای این انتخاب کنید).

با استفاده از ابزار قلم ، چیزی شبیه تصویر زیر را بکشید. از رنگ # a30d00 استفاده کنید. به عنوان پشت بام آیکون «خانه» ماست.

بعد، با استفاده از ابزار قلم ، شکل مستطیلی مانند تصویر زیر بکشید. از رنگ #ffffff استفاده کنید. همچنین، مربع کوچکی را با استفاده از ابزار مستطیل بکشید و آن را # 3498db رنگ کنید.

در مرحله بعد، با استفاده از مستطیل ر، یک مستطیل 248px X 396px را بکشید و با رنگ # fcab3a پر کنید.

تگهای

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

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

با استفاده از ابزار سحر و جادو ، تمام لایه مستطیل حاشیه محدود را انتخاب کنید و گزینه را معکوس کنید (می توانید از میانبر CTRL + Shift + I استفاده کنید). با انتخاب (مورچه های راهپیمایی) همچنان بر روی لایه سایه کلیک کنید و حذف را فشار دهید.

کار شما انجام شد برای ذخیره آن، روی File & gt؛ ذخیره برای وب کلیک کنید (میانبر CTRL + SHIFT + ALT + S است). ذخیره آن به عنوان PNG-24 .

2. یک مستطیل گرد با ابعاد 929 پیکسل به 929 پیکسل و شعاع 38 پیکسل بردار بکشید. من از رنگ # f5ea74 به صورت یک یادداشت چسبناک استفاده کردم.

3. خط 1px را با رنگ # 5d5608 رسم کنید. محل آن را در بالای یادداشت چسبنده قرار دهید.

4. خطوط 15 پیکسل را به صورت زیر نشان دهید:

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

5. مربع مستطیل را برای نماد یک تصویر در یادداشت چسبنده طراحی کنید.

6. سایه را همانطور که در آموزش آیکون صفحه اصلی انجام دادید، ترسیم کنید.

7. ذخیره آن!

شما می توانید کل بسته را اینجا دانلود کنید.

مقالات مرتبط

چگونه یک نوار پیشرفت جاوااسکریپت را با Pace.js ایجاد کنیم

چگونه یک نوار پیشرفت جاوااسکریپت را با Pace.js ایجاد کنیم

نمونه های کدهای شگفت انگیز از طراحی انمیشن با CSS