با این 4 مرحله آسان یک وب سایت زیبا در فتوشاپ ایجاد کنید

اگر شما یک تصویرگر هستید، پس طراحی وب ممکن است زمینه مناسبی برای شما باشد! گنجاندن تصویر در یک وب سایت دارای مزایایی است که اکثر وب سایت های استاندارد – مبتنی بر عکس – فاقد آن هستند.
نه تنها طراح این فرصت را دارد که از خلاقیت و تخیل خود استفاده کند، بلکه شرکت ظاهری کاملاً بدیع نیز پیدا می کند. به همین دلیل است که بیشتر صنایع خلاق مانند مد، آشپزی، بازی یا طراحی گرافیکی از تصاویر در وب سایت های خود استفاده می کنند – اگر می خواهید از رقبا متمایز شوید، تصویر بکشید!
از سوی دیگر، تصاویر به ندرت در وب سایت های با محتوای بالا مانند سایت های خبری پیاده سازی می شوند. این عمدتا به این دلیل است که اکثر وب سایت های سنگین نمی خواهند خوانندگان را در مورد محتوای خود گمراه کنند.
در آموزش selva، من از فتوشاپ استفاده می کنم تا نشان دهم چگونه یک وب سایت برای یک شرکت مواد غذایی مکزیکی طراحی کردم. بیایید این را به 4 مرحله آسان تقسیم کنیم.

1. ایجاد یک طرح

Sketching واقعا به چه معناست؟ زمانی که یک طراح یک مشکل اساسی طراحی را با قلم و کاغذ حل می کند. برخی از طراحان دوست دارند طرح های خود را با جزئیات مشخص کنند، در حالی که برخی دیگر مینیاتورها و مفاهیم متفاوتی خلق می کنند.
خوشبختانه برای شما، من در مورد برخی از ایده ها برای این وب سایت غذای مکزیکی تحقیق کردم و به طرح نهایی رسیدم. تنها کاری که باید انجام دهید این است که از آن به عنوان مرجع استفاده کنید.

2. برداری از طرح

ما طرح را تمام کردیم، اکنون زمان چسباندن آن است. از آنجایی که این یک وب سایت است، من از Photoshop استفاده می کنم – یک برنامه شطرنجی. با این حال، اگر شما یک طراح لوگو هستید، فقط باید از Illustrator استفاده کنید زیرا این یک برنامه برداری است و به صورت رایگان قابل دانلود است.
بیایید یک سند جدید ایجاد کنیم و طرح خود را در آن قرار دهیم می خواهیم طرح را نازک کنیم تا خطوط مسیری که ایجاد می کنیم قابل مشاهده باشند ما این کار را با کاهش مقدار شفافیت به 30٪ انجام خواهیم داد.

کجا باید برداریم؟ این به شما بستگی دارد! من با یک مداد شروع می کنم و از ابزار pen برای ترسیم طرح کلی هر بخش استفاده می کنم:

هنگامی که شکل خود را مشخص کردید، مسیر را انتخاب کنید و با استفاده از ابزار Paint Bucket آن را با رنگ اصلی پر کنید (alt + Delete).

با کلیک راست و کلیک بر روی Deselect مسیر انتخاب شده را از حالت انتخاب خارج کنید.
در پالت لایه ها، روی Lock Transparent Pixels کلیک کنید تا وقتی مرحله براش را شروع می کنید، فقط روی تصویر واقعی (نه پس زمینه شفاف) علامت گذاری کنید.

بیایید رنگ‌های تیره‌تری بگیریم و لبه‌های تصویر را براش بکشیم تا شیب‌های ملایم ایجاد کنیم.

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

توجه: اندازه قطر برس در تصویر بالا اندازه خاصی نیست، می توانید آن را بزرگ یا کوچک کنید تا با استفاده از آن احساس راحتی کنید.
ما تمام مراحل بالا را برای دست ها و کلاه مکزیکی تکرار می کنیم:

• ایجاد مسیرها (ابزار نوشتن)
• پرکننده رنگ
• براش هایی با سایه ها و هایلایت ها

فراموش نکنید که برای هر بخش یک لایه جدید ایجاد کنید!

3. سبک های مختلف را با هم ترکیب کنید

من بافت ها و تصاویر زیر را برای طرح خاص خود آماده کردم. هزاران بافت وجود دارد که می توانید به صورت آنلاین پیدا کنید تا با ظاهر پروژه خاص خود مطابقت داشته باشد.

متن 1:

بافت 2:

قالب (تصویر) 3:

پس از درج بافت 1 در سند خود، ابزار Free Transform (Ctrl + T) را فعال کردم تا بتوانم بافت را با تصویر خود تنظیم کنم.

چند مرحله دیگر برای بافت 2 و 3 وجود دارد (برای جزئیات اعداد به تصویر زیر مراجعه کنید):

• یک گروه جدید در پالت لایه ها ایجاد کنید.
• با کلیک بر روی نماد افزودن ماسک برداری، گروه را ماسک کنید
• ماسک بافت 2 و تبدیل 2 و 3 برای مطابقت با تصویر
• بافت های 2 و 3 را به گروه اضافه کنید
• بافت 3 را ماسک کنید و یک گرادیان روی آن ایجاد کنید
• در پالت لایه ها، Blending Mode را برای Texture 3 از Normal به Light Color تغییر دهید

4. ایجاد پس زمینه و اضافه کردن متن

اکنون زمان اعمال تغییرات نهایی در وب سایت ما است:
پس زمینه: من یک گرادیان شعاعی ایجاد کردم که از رنگ #f05c1e به #fff200 محو می شود.
افزودن متن: برای نوار ناوبری از نوع فونت Freehand BT 521 استفاده کردم. برای متن سفید منو از نوع فونت FINTRYPARK و رنگ #ebebeb استفاده کردم. برای فونت سبز لیمویی از Chalk Dust Condensed با رنگ #7fb900 استفاده کردم.
کارهای پایانی: روی گونه ها و شانه هایم سایه زدم و براقیت به گونه ها و پشتم اضافه کردم.

این نتیجه نهایی است:

امیدوارم از آموزش گام به گام من در مورد طراحی و وکتور طراحی وب سایت لذت برده باشید – فکر می کنم اکنون می خواهم غذای مکزیکی بخورم. 😉
با تشکر فراوان از طراح Mustag Firin (معروف به freaky) برای این آموزش عالی و کاملاً خوشمزه!