طراحی سایت با فتوشاپ

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

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

    قسمت 1: طراحی وب تمیز و حرفه ای را در فتوشاپ ایجاد کنید
    قسمت دوم: کدنویسی یک طراحی وب تمیز و حرفه ای

به چیدمانی که می خواهیم در این آموزش ایجاد کنیم ، نگاهی بیندازید. می توانید پیش نمایش نهایی تصویر را در زیر مشاهده کنید یا برای نسخه کامل اینجا کلیک کنید.

پیش نمایش نهایی
سند فتوشاپ خود را آماده کنید

1 با استفاده از تنظیمات از تصویر زیر ، یک سند جدید در Photoshop (Ctrl / Cmd + N) ایجاد کنید.

سند فتوشاپ خود را آماده کنید
تنظیمات واحدها و خط کش ها را تنظیم کنید

2 اطمینان حاصل کنید که در واحد پیکسل کار می کنید ، که واحد ثابت استاندارد برای طراحی وب است. تنظیمات زیر را برای حاکمان خود از پنجره گفتگوی Preferences (Ctrl / Cmd + K) تنظیم کنید. روی Units & Rulers کلیک کنید و اطمینان حاصل کنید که همه موارد را مطابق شکل زیر نشان داده اید.

سند فتوشاپ خود را آماده کنید
برای تعیین منطقه محتوا راهنمای اضافه کنید

3 حاکمان Photoshop را از نمای> حاکمان فعال کنید. با فشار دادن "Ctrl / Cmd + R" ، دید حاکمان را تغییر دهید. همچنین پنل اطلاعات را از پنجره> اطلاعات (کلید میانبر: F8) باز کنید. پنل اطلاعات بسته به ابزار انتخاب شده اطلاعات مفیدی می دهد. با فشار دادن "M" ، Rectangular Marquee Tool را انتخاب کرده و یک جعبه به عرض 120 پیکسل از گوشه سمت چپ بوم ایجاد کنید. می توانید در حین انتخاب ، اندازه را با مراجعه به صفحه اطلاعات تنظیم کنید. اکنون بر روی خط کش سمت چپ کلیک کرده و یک راهنما را در سمت راست انتخاب marquee بکشید همانطور که در تصویر زیر نشان داده شده است.

سند فتوشاپ خود را آماده کنید

4 این انتخاب را در لبه سمت راست بوم حرکت دهید. راهنمای دیگری را به سمت چپ انتخاب اختصاص دهید.

بوم شما اکنون باید به شکل زیر باشد:

سند فتوشاپ خود را آماده کنید
ایجاد آرم

5 اکنون می خواهیم آرم را برای وب سایت خود ایجاد کنیم. این آرم بسیار ساده خواهد بود و جلوه گرادیان رنگی خواهد داشت. یک گروه جدید ایجاد کنید (Layer> New> Group) و نام آن را "آرم" بگذارید.

6 ابزار Horizontal Type (T) را انتخاب کنید و "حروف کوچک" (یا نام وب سایت خود) را با حروف بزرگ تایپ کنید.

7 سپس در پنل کاراکتر ، قلم را روی Arial ، سبک را Bold و اندازه را 42pt قرار دهید. همچنین گزینه anti-aliasing metod را روی Sharp تنظیم کرده و از رنگ شماره 101112 استفاده کنید. همچنین وقتی ابزار Type (ابزار فعال) است ، می توانید این گزینه ها را در نوار گزینه تنظیم کنید.

https://www.webfx.com/blog/web-design/create-a-clean-and-professional-web-design-in-photoshop/