آموزش طراحی سایت، با فتوشاپ کامل و جامع

آموزش طراحی سایت با فتوشاپ یکی از نیازهای طراحان سایت است تا بتوانند اول طرح رو در قالب psd و سپس به کد تبدیل کنند.

مراحل طراحی سایت با نرم افزار فتوشاپ

مرحله اول: برای طرح در قالب psd و سپس تبدیل به کد

قدم اول برای طرح در قالب psd و سپس تبدیل به کد، مشخّص کردن عرض سایت است. هرسایتی با توجّه با سلیقهء مشتری، عرض سایت متفاوت می‌باشد، برای مثال: عرض سایت 1300پیکسل و ارتفاع می‌تواند متغییر باشد 1500 یا 2000 پیکسل، پس زمینه سفید سپس گزینهء Create

تصویر(1)

تصویر(2)

مرحله دوم : طراحی هدر (Header)

نکته: در نرم‌افزار فتوشاپ گروه‌بندی لایه‌ها، باعث نظم و جلوگیری از بهم‌ریختگی لایه‌ها می‌شود برای این نظم، ایجاد پوشه امر مهمی است.

یک پوشه بسازید نام آن‌را هدر بگذارید. در صورت تغییر به پوشه مربوط به هدر مراجعه نمایید.

نکته : لایه اول  پس‌زمینه و در پوشه قرار ندهید.

تصویر(3)

مرحله سوم: ایجاد هدر که با Rectangle Tool  با گوشه‌های گرد

ایجاد هدر که با Rectangle Tool  با گوشه‌های گرد

در لایه هدر مستطیلی با گوشه‌های گرد ترسیم کنید، برای گرد کردن گوشه‌ها روی شکل دوبل کلیک، از کادر create Rectangle ، Corner Radius را 80 قرار دهید.

تصویر(4)

تصویر(5)

مرحله چهارم:سایه دادن به کادر هدر برای جلوه بیشتر

برای جلوه بیشتر می‌توان سایه به کادر هدر داد روی لایه‌ء مستطیل دابل کلیک از کادر layer style ، Drop shadow انتخاب و رنگ مورد نظر را به آن بدهید.

برای تنظیمات دقیق‌تر از خط‌کش استفاده کنید، برای فعّال کردن آن از منوی view

از لبه کادر تا هدر ازسمت چپ 36 پیکسل …

تصویر(6)

تصویر(7)

مرحله پنجم: قرار دادن لوگو در هدر

 لوگو را وارد می‌کنیم و روی هدر قرار می‌دهیم، Ctrl , O را بفشرید پنجره  open باز می‌شود لوگو را انتخاب کنید.

تصویر(8)

مرحله ششم: اضافه کردن Menu

اضافه کردن Menu ، ابزار متن را انتخاب کنید اولین المان می‌تواند صفحه نخست…

تصویر(9)

مرحله هفتم:  جداسازی  هر کدام از المان‌های متن با Rectangle Tools

برای جداسازی هر کدام از المان‌های متن با Rectangle Tools  کادر ترسیم کنید.

تصویر(10)

مرحله هشتم: از گوگل برای UI سایت آیکن Arrow Icon را دانلود کنید

 از گوگل برای UI سایت آیکن Arrow Icon را دانلود کنید، سپس تو طرح PSD ببرید، برای نشان دادن زیرمنو از این Arrow Icon بکار می‌رود.

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

تصویر(11)

تصویر(12)

مرحله نهم: ابزار متن، برای المان متن و ایجاد زیرمنو

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

تصویر(13)

به همین ترتیب می‌توان زیرمنوهای دیگر را هم اضافه کرد.