۰۲مرداد
از صفر تا صد یک پروژه طراحی وب
این آموزش به سه قسمت تقسیم میشه:
- ساخت قالب در فتوشاپ
- کد نویسی قالب HTML و CSS
- کدنویسی پایانی و رسپانسیو کردن قالب
در این پست با قسمت اول در خدمت شما هستیم
منابع مورد نیاز برای این پروزه:
دریافت تصویر 1- دریافت تصویر 2
- دریافت تصویر 3
-
Lato font
-
Free Vector Icons
- آواتار
-
Dribbble icon
-
Twitter icon
-
Facebook icon
-
Google+ icon
دریافت تصویر 1شروع پروژه:
مرحله 1:
ساخت یک صفحه در فتوشاپ با مشخصات زیر
ساخت یک صفحه در فتوشاپ با مشخصات زیر
مرحله 2:
ایجاد خطوط راهنما View > New Guide
در مناطق زیر
عمودی: 20px,50px,115px,230px,550px,570px,875px,1180px
افقی:60px
مرحله 3:
ساخت سه Layer Group به نام های Left Sidebarو Discription و Work
Layer > New > Group
همچنین شما می توانید از راه سریع نشان داده شده در تصویر زیر برای ایجاد Layer Group استفاده کنید
ایجاد قسمت Left Sidebar
ساید بار قسمت چپ شامل پروفایل کاربر، لینک های شبکه های اجتماعی، آواتار و منوی اصلی می باشد
مرحله 1:
Rectangle tool را انتخاب کرده و رنگ Foreground را به
#11171c تغییر دهید. مستطیلی به ابعاد 230px در 1320px در Left sidebar group در سمت چپ صفحه مابین انتهای چپ صفحه و خط راهنمای عمودی چهارمی بکشیدمرحله 2:
یک Group در Left Sidebar Group بسازید و نام آنرا Profile Pic بگذارید داخل آن با استفاده از ابزار Ellipse tool و نگه داشتن دکمه Shift یک دایره 100px در 100px درست زیر خط راهنمای افقی و وسط خط راهنمای سوم عمودی بکشید
مرحله 3:
حال می خواهیم در دایره بالا عکس آواتار را بگذاریم. می توانید با استفاده از سایت uifaces.com عکس خود را در این سایت وارد کرده و آواتار آنرا دریافت کنید. ما از یه عکس در همین سایت استفاده کردیم.عکس را در وسط دایره کشیده شده قرار می دهیم.دکمه Alt را نگه داشته و موس را روی لایه آواتار می بریم تا زمانی که پیکان کوچک رو به پایینی مشخص شد دکمه Alt را رها می کنیم.بدین صورت یک لایه Clipping Mask ایجاد می شود.عکس آواتار خود را به فرم دایره شکل کشیده شده متصل کنید و با استفاده از ابزار Move آنقدر آنرا حرکن بدهید تا با دایره هم تراز شود
حال می خواهیم در دایره بالا عکس آواتار را بگذاریم. می توانید با استفاده از سایت uifaces.com عکس خود را در این سایت وارد کرده و آواتار آنرا دریافت کنید. ما از یه عکس در همین سایت استفاده کردیم.عکس را در وسط دایره کشیده شده قرار می دهیم.دکمه Alt را نگه داشته و موس را روی لایه آواتار می بریم تا زمانی که پیکان کوچک رو به پایینی مشخص شد دکمه Alt را رها می کنیم.بدین صورت یک لایه Clipping Mask ایجاد می شود.عکس آواتار خود را به فرم دایره شکل کشیده شده متصل کنید و با استفاده از ابزار Move آنقدر آنرا حرکن بدهید تا با دایره هم تراز شود
مرحله 4:
حال یک Title Group بسازید و ابزار Horizontal Type tool را انتخاب کرده و با رنگ ffffff# و سایز فونت 16pt نام پروفایل خود را بنویسید ما در اینجا از نام Chris Johnson استفاده کردیم. و آنرا درست 25px پایین تر از عکس آواتار و درست در وسط خط راهنمای سوم عمودی قرار دهید
مرحله 5:
حال توضیحی در مورد خود در پروفایلمان می دهیم. برای این کار از همان ابزار بالا و فقط با سایز فونت 14pt استفاده می کنیم. این قسمت 20px پایین تر از نام خودمان نوشته می شود
حال می خواهیم به صفحه خود و در قسمت Left Sidebar برای اتصال به شبکه های اجتماعی خود آیکن های مورد نطر خود را قرار دهیم. یک Group با نام Social Media بسازید و آیکن های Dribble, Twitter,Facebook و +Google را درون آن بگذارید. سپس روی لایه Dribble رفته Blending Option را انتخاب کنید و در قسمت Color Overlay رنگ سفید را انتخاب کنید.
مرحله 7:
روی بقیه آیکن های شبکه اجتماعی نیز افکت بالا را اجرا کنید.این گروه باید 25px پایینتر از نوشته توضیحات قرار بگیرند
روی بقیه آیکن های شبکه اجتماعی نیز افکت بالا را اجرا کنید.این گروه باید 25px پایینتر از نوشته توضیحات قرار بگیرند
مرحله 8:
رنگ Foreground را به ffffff# تغییر دهید و ابزار Lie tool را انتخاب کرده سپس یک خط 50px زیر آیکن های شبکه های اجتماعی و با ضخامت 1px در Left sidebar به صورت افقی بکشید.
رنگ Foreground را به ffffff# تغییر دهید و ابزار Lie tool را انتخاب کرده سپس یک خط 50px زیر آیکن های شبکه های اجتماعی و با ضخامت 1px در Left sidebar به صورت افقی بکشید.
مرحله 9:
Opacity این خط را روی 10% قرار دهید.
Opacity این خط را روی 10% قرار دهید.
مرحله 10:
در این قسمت می خواهیم منوی اصلی را بسازیم. یک Group به نام Navigation ایجاد کنید و از Free Vector دانلود شده آیکن Document را انتخاب کرده و در Navigation Group قرار می دهیم با استفاده از Ctrl+T اندازه سایز آیکن را به 13px در 16px تغییر می دهیم و نام لایه را نیز به Work icon تغییر می دهیم.رنگ آنرا روی #d35136 قرار میدهیم آیکن را 40px پایینتر از خط کشیده شده و چسبیده به خط راهنمای عمودی اول می گذاریم
مرحله 11:
برای متن آن از Horizontal Type toolفونت Lato و سایز 16pt استفاده می کنیم.و آن را چسبیده به دومین خط راهنمای عمودی می گذاریم
مرحله 12:
برای زیر منوها هم رنگ Foreground را به 424a51# و با سایز فونت 14pt مانند شکل زیر چینش می کنیم
برای زیر منوها هم رنگ Foreground را به 424a51# و با سایز فونت 14pt مانند شکل زیر چینش می کنیم
مرحله 13:
اولین زیر منو را به رنگ سفید تغییر می دهیم
اولین زیر منو را به رنگ سفید تغییر می دهیم
مرحله 14:
بقیه منوهای اصلی و زیر منوها را نیز طبق شکل های زیر چینش می کنیم
طراحی قسمت Description
مرحله1:
در Description Group رنگ Foreground را به #f7f7f7 تغییر می دهیم و مستطیلی با ابعاد 320px در 1320px با رنگ Foreground می کشیم درست مابین قسمت Left sidebar و خط راهنمای پنجم عمودی
مرحله 2:
رنگ Foreground را به e7e7e8 تغییر دهید و با استفاده از ابزار Line tool خطی به ضخامت 1px و درست روی خط راهنمای عمودی پنجم از بالای صفحه تا پایین صفحه بکشید. این خط جدا کننده بخش Description و Mane می باشد. نام لایه خط را V line بگذارید.
بقیه منوهای اصلی و زیر منوها را نیز طبق شکل های زیر چینش می کنیم
طراحی قسمت Description
مرحله1:
در Description Group رنگ Foreground را به #f7f7f7 تغییر می دهیم و مستطیلی با ابعاد 320px در 1320px با رنگ Foreground می کشیم درست مابین قسمت Left sidebar و خط راهنمای پنجم عمودی
مرحله 2:
رنگ Foreground را به e7e7e8 تغییر دهید و با استفاده از ابزار Line tool خطی به ضخامت 1px و درست روی خط راهنمای عمودی پنجم از بالای صفحه تا پایین صفحه بکشید. این خط جدا کننده بخش Description و Mane می باشد. نام لایه خط را V line بگذارید.
مرحله 3:
خط عمودی دیگری با ضخامت 3px و فاصله 24px از Left sidebar و 30px پایین تر از بالای صفحه می کشیم و نام لایه آنرا Timeline می گذاریم
مرحله 4:
رنگ Foreground را به d35136 تغییر دهید و با استفاده از ابزار Ellipse tool دایره ای به ابعاد 10px در 10px بکشید و مانند شکل زیر آنرا در بالا و مرکز خط قرار دهید
مرحله 5:
Blending Option را بر روی لایه دایره قرمز رنگ انتخاب کرده و روی Strock کلیک می کنیم و تنظیمات را مانند شکل زیر انجام می دهیم
مرحله 6:
رنگ Fore ground را به 11171c تغییر دهید و با استفاده از ابزار Horizontal Type tool و در فاصله 20px از دایره قرمز و 20px از بالای صفحه تاریخ را با فونت Lato و Bold و سایز 14pt می نویسیم
رنگ Foreground را به d35136 تغییر دهید و با استفاده از ابزار Ellipse tool دایره ای به ابعاد 10px در 10px بکشید و مانند شکل زیر آنرا در بالا و مرکز خط قرار دهید
مرحله 5:
Blending Option را بر روی لایه دایره قرمز رنگ انتخاب کرده و روی Strock کلیک می کنیم و تنظیمات را مانند شکل زیر انجام می دهیم
مرحله 6:
رنگ Fore ground را به 11171c تغییر دهید و با استفاده از ابزار Horizontal Type tool و در فاصله 20px از دایره قرمز و 20px از بالای صفحه تاریخ را با فونت Lato و Bold و سایز 14pt می نویسیم
مرحله 7:
رنگ Foreground را به 5e5e5e تغییر می دهیم و در زیر تاریخ توضیحاتی در مورد کارهایی که در آن تاریخ انجام داده ایم می دهیم و سپس دکمه اینتر را دو بار کلیک کرده و متن Client و Tags را می نویسیم.متن اولی را از فونت Lato و در حالت regular و سایط 14pt و متن Client و Tags را در حالت Boldمی نویسیم.Line height را روی 18pt تنظیم می کنیم
مرحله 8:
در این مرحله از دایره قرمز و متنها کپی می گیریم و این بار دایره قرمز رنگ و متن ها را در فاصله 100px از دایره قرمز اصلی قرار می دهیم
رنگ Foreground را به 5e5e5e تغییر می دهیم و در زیر تاریخ توضیحاتی در مورد کارهایی که در آن تاریخ انجام داده ایم می دهیم و سپس دکمه اینتر را دو بار کلیک کرده و متن Client و Tags را می نویسیم.متن اولی را از فونت Lato و در حالت regular و سایط 14pt و متن Client و Tags را در حالت Boldمی نویسیم.Line height را روی 18pt تنظیم می کنیم
مرحله 8:
در این مرحله از دایره قرمز و متنها کپی می گیریم و این بار دایره قرمز رنگ و متن ها را در فاصله 100px از دایره قرمز اصلی قرار می دهیم
طراحی قسمت Work
مرحله 1:
در Work Group با ابزار Rectangle tool یک مستطیل به ابعاد 610px در 400px بین خط راهنمای عمودی ششم و خط راهنمای عمودی هشتم می کشیم(در این قسمت فعلا رنگ مستطیل مهم نیست. فقط از رنگی استفاده کنید که دیده شود). از قسمت بالای صفحه 20px باید فاصله داشته باشد.
این پست در اینجا به پایان رسید در آخر کار باید پروژه شما شبیه به شکل زیر باشد
مرحله 1:
در Work Group با ابزار Rectangle tool یک مستطیل به ابعاد 610px در 400px بین خط راهنمای عمودی ششم و خط راهنمای عمودی هشتم می کشیم(در این قسمت فعلا رنگ مستطیل مهم نیست. فقط از رنگی استفاده کنید که دیده شود). از قسمت بالای صفحه 20px باید فاصله داشته باشد.
همانطور که مشخص است مستطیل کشیده شده از هر گوشه 20px فاصله دارد
مرحله 2:
تصویر شماره 3 را در فتوشاپ باز کرده و در لایه ای بالای لایه مستطیل قرار می دهیم. دکمه Alt را نگه داشته و ماوس را روی لایه عکس برده تا نشانگر به یک پیکان کوچک و به سمت پایین تبدیل شود سپس دکمه Alt را رها می کنیم.بدین ترتیب لایه به لایه Clipping Mask تبدیل می شود و عکس فقط در مستطیل دیده می شود. با استفاده از Ctrl+T اندازه عکس را تغییر می دهیم تا در مستطیل به صورت شکل زیر شود
مرحله 3:
دو مستطیل دیگر از مستطیل قبلی کپی می کنیم و در فاصله 20px از یکدیگر قرار می دهیم سپس تصویر 1 و تصویر 2 را مانند مرحله دو درون هر مستطیل قرار می دهیم
مرحله 4:
در این قسمت مطمئن شوید که تاریخ نمایش داده شده در Description Group هم تراز با عکس ها باشد. از یکی از لایه های تاریخ با توضیحاتش یک کپی بگیرید و برای عکس سوم نیز تاریخ و توصیح بگذارید(مانند شکل زیر)
مرحله 2:
تصویر شماره 3 را در فتوشاپ باز کرده و در لایه ای بالای لایه مستطیل قرار می دهیم. دکمه Alt را نگه داشته و ماوس را روی لایه عکس برده تا نشانگر به یک پیکان کوچک و به سمت پایین تبدیل شود سپس دکمه Alt را رها می کنیم.بدین ترتیب لایه به لایه Clipping Mask تبدیل می شود و عکس فقط در مستطیل دیده می شود. با استفاده از Ctrl+T اندازه عکس را تغییر می دهیم تا در مستطیل به صورت شکل زیر شود
مرحله 3:
دو مستطیل دیگر از مستطیل قبلی کپی می کنیم و در فاصله 20px از یکدیگر قرار می دهیم سپس تصویر 1 و تصویر 2 را مانند مرحله دو درون هر مستطیل قرار می دهیم
مرحله 4:
در این قسمت مطمئن شوید که تاریخ نمایش داده شده در Description Group هم تراز با عکس ها باشد. از یکی از لایه های تاریخ با توضیحاتش یک کپی بگیرید و برای عکس سوم نیز تاریخ و توصیح بگذارید(مانند شکل زیر)
مرحله 5:
به Work Group رفته یک آیکن Refresh به پروژه اضافه کنید و اندازه آن را به 20px در 20px و رنگ آیکن را به a0a2a4 تغییر دهید. و در آخر آن را در فاصله 20px از Work Image قرار دهید با استفاده از ابزار Horizontal Type tool متن Loading را نوشته و در فاصله 10px از آیکن Refresh قرار دهید.
به Work Group رفته یک آیکن Refresh به پروژه اضافه کنید و اندازه آن را به 20px در 20px و رنگ آیکن را به a0a2a4 تغییر دهید. و در آخر آن را در فاصله 20px از Work Image قرار دهید با استفاده از ابزار Horizontal Type tool متن Loading را نوشته و در فاصله 10px از آیکن Refresh قرار دهید.
این پست در اینجا به پایان رسید در آخر کار باید پروژه شما شبیه به شکل زیر باشد
امیدوارم با استفاده از این آموزش موارد جدیدی رو یاد گرفته باشید. اگر سوالی در مورد این پروژه دارید می تونید با استفاده از نظردهی آن را با ما در میان بگذارید
مهران بابایی