گروه مقاله : آموزش فتوشاپ

تاريخ انتشار : 1396/03/17 - 17:39

كد :7619

طراحی قالب سایت تک صفحه

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

آموزش فتوشاپ طراحی قالب سایت تک صفحه

عکس زیر تصویری است که در انتهای این آموزش ایجاد خواهیم کرد.

ما در این آموزش از یک سری فونت و تصویر دانلودی استفاده کرده ایم شما میتوانید از فونت ها و تصاویر خودتان استفاده کنید.

در این آموزش ما طراحی را بر اساس CSS رایگان سیستم شبکه بندی 960 انجام داده ایم . ولی همین گرافیک را میتوان برای تبدیل به کد توسط سیستم شبکه bootstrap grid system و سیستم شبکه بندی W3.css نیز انجام دهید و حتی اگر بخواهید میتوانید یک سیستم شبکه بندی اختصاصی برای خود ایجاد کنید.

به هر حال در این آموزش توضیحی در باره نحوه تبدیل این استایل به کد نخواهیم داد برای مطالعه آموزش های مربوط به این کار به مقالات آموزش طراحی سایت مراجعه کنید.

دستور View > Show > Guides را در فتوشاپ اجرا کنید تا به سیستم شبکه بندی فتوشاپ دسترسی داشته باشید.

روی لینک 960_grid_12_col .psd کلیک کنید تا بتوانید آن را دانلود کنید. این فایل محتوی یک سند psd است که در آن بکگراند را با کمک یک لایه تنظیمی Solid به رنگ سفید دارد و یک لایه متشکل از مستطیل های ایجاد شده با ابزار رسم مستطیل که در فواصل مشخصی از هم قرار دارند.

بعد از اینکه این فایل را در فتوشاپ باز کردید دستور Image > Canvas Size را اجرا کنید و width=1200px , height=1700px را تنظیم کرده و روی مربع بالا – وسط کلیک کنید . حالا یک سند جدید با اندازه 1px * 3px. ایجاد کنید و یک لایه جدید به آن بیافزایید. با ابزار انتخاب مستطیل یک مربع 1×1 پیکسل ایجاد کنید. این مربع را با رنگ سیاه پر کنید. دستور Edit > Define Pattern را وارد کرده و نام مناسبی به این الگو بدهید و سند را ببندید:

به سندی که در آن ستون های 12 تایی قرار داشت بازگردید. حالا لایه 12 Col Grid را مخفی کنید ولی همواره اجازه دهید این لایه بالاترین لایه در پنل لایه ها باشد.

دستور Layer > New Fill Layer > Solid را اجرا کنید و رنگ #f2f1ed را اعمال کنید و نام این لایه را به Main background تغییر دهید به این لایه فیلتر noise را اجرا کنید ما برای اینکار ابتدا لایه را به Smart object تبدیل کرده ایم تا بعدا بتوانیم فیلتر را ادیت کنیم. سپس استایل لایه pattern را به این لایه اعمال کنید و از همان الگوی ایجاد شده در گام قبل استفاده کنید.

بکگراند header سایت را ایجاد کنید

یک پوشه در پنل لایه ها به نام Header ایجاد و درون آن پوشه ای به نام Header bg بسازید.

با ابزار رسم مستطیل بکمک کلید میانبر Shift+u یک مستطیل با ابعاد 1200px * 150px با رنگ #e9e5db ایجاد کنید نام این لایه را header bg گذاشته و آن را در بالای لایه های دیگر قرار دهید. روی این لایه راست کلیک کنید و آن را به Smart Object تبدیل کنید. و سپس فیلتر Filter > Noise > Add Noise را اعمال کرده یک الگوی دیگر مانند الگویی قبلی ایجاد کنید اینبار الگو را افقی ایجاد کنید و این الگو را به header bg اعمال کنید .

برای آنکه بتوانیم تباین میان هدر سایت و قسمت های دیگر را بیافزاییم از ابزار رسم خط با کمک کلید میانبر Shift+U استفاده خواهیم کرد. ضخامت این خط را 1 پیکسل رسم می کنیم . و رنگ آن را #bcb9b1 قرار خواهیم داد نام لایه ی این خط را 1px line می گذاریم. لایه را کپی کرده و لایه را با کلید جهت دار 1 پیکسل به پایین بکشید و رنگ آن را #f8f7f5 بگذارید.

حالا ابزار رسم انتخاب مستطیل را انتخاب کنید و یک ناحیه انتخاب زیر header عکس شماره 1 ایجاد کنید و آنرا با گرادیانت عکس شما ره 2 پر کنید. نام این لایه را bottom gradient گذاشته و نوع ترکیبی لایه و شفافیت آن را به Soft Light 20% تغییر دهید.

لایه گرادیانت را کپی کنید و لایه جدید را به بالای هدر منتقل کنید. نام این لایه را top gradient بگذارید روی اینکون لایه گرادیانت کلیک کنید و سپس گزینه Reverse را انتخاب کنید. تا گرادیانت از بالا به پایین اجرا شود.

در این مرحله میخواهیم که به زیر هدر یک پترن یا الگو اضافه کنیم با استفاده از ابزار رسم مستطیل U یک مستطیل با ارتفاع 160px ایجاد کنید . نام این لایه را pattern گذاشته و Fill=0% قرار دهید.

در پنجره استایل لایه به این لایه استایل Pattern Overlay effect (2) استفاده می کنیم.

این لایه لبه های تیزی دارد برای آنکه این مشکل را حل کنیم از یک ماسک لاهی استفاده می کنیم دستور زیر را اجرا کنید Layer > Layer Mask > Reveal All حالا ابزار گرادیانت را انتخاب کرده و گرادیانت سیاه به ترانسپرنت را انتخاب کنید. کلید Shift را نگه داشته و یک گرادیانت عمودی در پایین لایه ایجاد کنید تصویر شماره 3:

ما یک گرادیانت دیگر در زیر هدر ایجاد خواهیم کرد. از ابزار رسم مستطیل استفاده کنید طبق تصویر زیر عمل کنید عکس شماره 1 و دستور Layer > New Fill Layer > Gradient را اجرا کنید تصویر شماره 2.

نام این لایه را content top gradient بگذارید و نوع ترکیبی لایه را بر روی Soft Light 50% بگذارید.عکس شماره 3.

یک لوگو ایجاد کنید

ما برای ایجاد لگو از فونت های Muncie و Damion استفاده کرده ایم. شما میتوانید این فونت ها را جستجود و دانلود کنید و یا با فونت های خودتان این تمرین را ادامه دهید. ابزار تایپ را انتخاب کنید. ما با فونت Muncie با رنگ #847e70 و اندازه 80px عبارت خود را تایپ کرده ایم. به لایه متن سایه ای طبق عکس شماره 1 بدهید ما کمی هم به متن highlight اضافه کرده ایم تا روشنتر به نظر برسد.

با ابزار رسم خط با کمک کلید میانبر Shift+U دو خط به رنگ #837d6f در بالای متن ایجاد کنید . و دو خط دیگر نیز به زیر متن اضافه کنید نام این لایه را 1px line بگذارید تصویر شماره 2 به تصویر زیر نگاه کنید.

هر چهار خط را کپی گرفت و رنگ این خطوط جدید را سفید گزاشته و opacity=50% قرار دهید. با ابزار جابجایی کلید میانبر V این خطوط را یک پیکسل به پایین خطوط اصلی جابجا کنید. تصویر شماره 3.

تمام این خطوط را در پوشه ای به نام lines قرار دهید.

با کمک ابزار تایپ عبارت Retro را در وسط دو خط پایین تایپ کنید. از فونت Damion با اندازه های 21 پیکسل و رنگ #847e70 استفاده کنید به این متن یک سایه طبق این اندازه ها اعمال کنید:

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

برای اینکه تصویر ما زیباتر شود خطوط را از اطراف نمادها ماسک کنید:

ایجاد ناحیه نوار منو

یک پوشه جدید به نام Navigation ایجاد کنید. در درون این پوشه ، پوشه ی دیگری به نام ribbon ایجاد کنید.

از ابزار رسم مستطیل با ابعاد 610px * 44px و رنگ #d8cfba استفاده کنید. نام این لایه را rectangle بگذارید و این لایه را به Smart Object تبدیل کنید. حالا دستور زیر را اجرا کنید Filter > Noise > Add Noise .

سپس در پنجره استایل لایه به آن پترن و رنگ #b1aa99 بدهید.

با ابزار Pen Tool به این مستطیل شکل یک روبان را بدهید تصویر شماره 1 .

نام این لایه روبان مانند سمت چپ را left end و آن را در زیر لایه روبان و 10 پیکسل به سمت راست جابجا کنید تصویر شماره 2

این لایه را به Smart Objectتبدیل کرده و فیلتر نویز را با همان مشخصات به این لایه تکرار کنید. به این لایه استایل لایه inner shadow بدهید تصویر شماره 3 . ما از رنگ #9d9684 استفاده کرده ایم:

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

با ابزار Pen با این اشکال کمی سایه اضافه کنید:

حالا با ابزار انتخاب یک ناحیه انتخاب 10px * 44px در سمت چپ نوار منو ایجاد کنید تصویر شماره 1.

دستور Layer > New Fill Layer > Gradient را اجرا کرده و نام این لایه left highlight بگزارید نوع ترکیبی لایه را Soft Light 70% انتخاب کنید تصویر شماره 2.

یک ناحیه انتخاب دیگر به ابعاد 5px * 44pxایجاد کنید تصویر شماره 3 و سپس دستور Layer > New Fill Layer > Gradient را اجرا کنید و گرادیانت #b5ae9d به ترانسپرنت را انتخاب کنید تصویر شماره 4 نام این لایه را left shadow بگذارید.

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

حالا برای اینکه افکت بافت چرخ خیاطی را به این نوار منو اضافه کنید. ابتدا یک الگوی جدید بسازید . یک سند جدید در ابعاد 10 * 1 پیکسل ایجاد کنید.

ابزار رسم انتخاب مستطیل را انتخاب کنید. و یک ناحیه انتخابی به اندازه 6px * 1px ایجاد کنید و ناحیه انتخابی را با رنگ مشکی پر کنید.

از ناحیه انتخاب خارج شوید و لایه بکگراند را مخفی کنید و دستور Edit > Define Pattern. را اجرا به این الگو هم نام مناسبی بدهید.

به سند اصلی بازگشته و یک پوشه به نام dashed lines در زیر پوشه ribbon ایجاد کنید.

با ابزار رسم خط یک خط 1 پیکسلی در بالای ناحیه منو رسم کنید تصویر شماره 1. سپس Fill=0% قرار دهید . حالا به این لایه استایل لایه پترن با الگویی که قبلا ایجاد کرده بودید اعمال کنید تصویر شماره 2 .

نام این لایه را 1px dashed line قرار داده و لایه را به Smart Object تبدیل کنید. روی این لایه دبل کلیک کنید و استایل لایه Color Overlay را با رنگ #b1aa99 اعمال کنید. تصویر شماره 3.

لایه را کپی کنید و رنگ آن را به #e4ddcd تغییر داده و آنرا یک پیکسل زیر خط چین اصلی بگذارید.تصویر شماره 4.

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

بکگراند ناحیه منو را ایجاد کنید

یک پوشه به نام ribbon bg ایجاد کنید و آن را زیر پوشه ribbon قرار دهید با ابزار رسم مستطیل یک مستطیل در زیر ناحیه منو ایجاد کنید. مطمئن شوید این مستطیل عرض هدر را پوشانده است و نام لایه را ribbon bg قرار داده و سپس تنظیمات Soft Light 20%. را انجام دهید.

حالا با ابزار رسم ناحیه انتخاب مستطیل یک ناحیه انتخاب در گوشه سمت چپ ناحیه منو ایجاد کنید تصویر شماره 1

دستور Layer > New Fill Layer > Gradient را ایجاد کنید تصویر شماره 2 و سپس تنظیمات لایه را به Soft Light 40% تغییر دهید تصویر شماره 3 .

ابزار رسم خط را انتخاب کنید و با رنگ #b0a793 یک خط 1 پیکسلی روی گوشه سمت چپ ناحیه منو رسم کنید. این خط را کپی و به سمت راست منتقل کنید تصویر شماره 4.

به قسمت سمت راست چند خط و گرادیانت اضافه کنید . یادتان باشد گرادیانت را باید 180 درجه و خطوط را در جهت افقی بچرخانید. تصویر شماره 5:

یک ماسکل لایه به پوشه ribbon bg اضافه کنید برای اینکار از دستور Layer > Layer Mask > Reveal All استفاده کنید. حالا از گرادیانت خطی سیاه به ترانسپرنت استفاده کنید. و بالا و پایین ناحیه را ماسک کنید . در تصویر زیر میتوانید ماسک ما را مشاهده کنید.

افزودن ایتم های منو

ما چند عکس و متن را بعنوان ایتم های منو اضافه کرده ایم با استایل لایه Color Overlay رنگ این متن ها و عکس ها را با تصویر همخوان کنید ما به متن خود سایه داده و جز گروه اول متن و عکس بقیه را خاکستری کرده ایم تا جلوه واقعی پیدا کنند:

ما با استفاده از تکنیک هایی که تا اینجای کار یادگرفته ایم یک دکمه تماس با ما ایجاد کرده ایم:

ایجاد ناحیه سرویس ها

برای ایجاد ناحیه سرویس یک سند جدید ایجاد کرده و با ابزار رسم چند ضلعی روی تصویر خود کلیک کنید روی گزینه shape و Radius=70 px و Sides=6 قرار دهید.

رنگ را بر روی کد #8E8E8E قرار دهید و سپس به آن 20px خط دور با همان رنگ اعمال کنید. سپس در پنل Stroke گزینه Corner to Round Join را انتخاب کنید. روی شکل راست کلیک کنید و Transform > Rotate را انتخاب کرده و سپس Angle=90 قرار دهید.

اندازه های شکل را در نوار آپشن به width=140px , height=162 تغییر دهید.

با ابزار جابجایی چند ضلعی را انتخاب و آنرا کپی کنید به سند اصلی رفته و آنرا بعنوان یک smart object درج نمایید دستور ctrl+T را اجرا کرده و کلید Shift را نگه دارید اندازه این شکل را تا width=300 px تغییر دهید تا چهار عرض از ستون های 960 را اشغال کند.

در پنل لایه ها برای این لایه Fill=0% قرار داده و سپس پترنی را که در گام های نخست ایجاد کرده بودیم اجرا کنید. این لایه را به پوشه ای بنام Web Design اضافه کنید و سپس یک پوشه به نام Services اضافه کنید:

حالا لایه و پترن آن را انتخاب و مجددا به یک Smart Object تبدیل کنید و سپس به آن افکت Color Overlay با رنگ #a7c5bd را اعمال کنید:

از این شکل یک کپی تهیه کرده و آن را کوچکتر کرد و رنگ آن را مطابق بکگراند قرار دهید .

سپس با ابزار تایپ به آن متن اضافه کنید:

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

ما کمی متن و یک دکمه به این چند ظلعی اضافه کرده و سپس با همین تکنیک چند ضلعی های دیگری را نیز ایجاد کرده ایم:

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

یک پوشه به نام Portfolio ایجاد کنید. یک پوشه دیگر به نام portfolio bg در داخل آن ایجاد کنید.

با استفاده از ابزار رسم مستطیل با کلید میانبر Shift+u یک مستطیل رسم کنید که ابعاد آن 960px * 310px و رنگ آن #89b9ac باشد. نام این لایه را first border بگذارید. و opacity=20% تنظیم کنید. حالا با ابزار جابجایی این مستطیل را 60 پیکسل به زیر قسمت Services منتقل کنید.

حالا با این روش و افزودن پترن تصویر زیر را ایجاد کنید:

افزودن ایتم های نمونه کارها

همانطور که در تصویر زیر میبینید ما با استفاده از تکنیک چند ضلعی و چند تصویر این قسمت را نیز ایجاد کرده ایم :

حالا باید به این قسمت متن اضافه کنیم همانطور که میبینید سمت راست قسمت نمونه کار ها برای اینکار مناسب سات . یک پوشه به نام active item ایجاد کنید و با ابزار رسم مستطیل گوشه گرد با گرد شدگی 4 پیکسل یک مستطیل گوشه گرد با ابعاد 220px * 250px و رنگ #f5f2ea ایجاد کنید. نام این لایه را border گذاشته و به آن یک خط دور به اندازه 1 پیکسل و رنگ #c3b9ab بدهید .

ابزار رسم مستطیل را انتخاب کنید و یک مستطیل به ابعاد 200px * 230px در وسط مستطیل گوشه گرد رسم کنید.

تصویری که میخواهید بعنوان محتوا در این بخش قرار گیرد را انتخاب کرده و آنرا در بالای لایه image_holder قرار دهید نام لایه تصویر را به image تغییر دهید. روی لایه راست کلیک کرده و Clipping Mask را انتخاب کنید. حالا تصویر شما تنها در داخل مستطیل قابل مشاهده خواهد بود.

با ابزار تایپ نام نمونه کار را تایپ کنید ما از فونت Oswald در ابعاد 24px و رنگ #7b9d94 استفاده کرده ایم . این لایه متن را 20 پیکسل از سمت چپ کادر فاصله دهید. و به آن افکت Drop Shadow بدهید .

با ابزار رسم خط یک خط افقی به ابعاد 370px *1px ایجاد کنید و رنگ آن را #c3b9ab بگذارید. خط را به 10 پیکسل زیر headline جابجا کنید.این لایه را کپی کنید . رنگ این خط جدید را به #faf9f8 تغییر دهید و آنرا 1 پیکسل به پایین جابجا کنید.

ابزار تایپ را انتخاب کنید و متنی با عرض 370px انتخاب کنید. یک پاراگراف اضافه کنید ما با فونت Sans Light در اندازه ی 15px و رنگ #5c574f متن خود را تایپ خواهیم کرد. ما در پنل پاراگراف leading=24 px قرار دهید.

ایجاد قسمت About

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

یک پوشه به نام About ایجاد کنید. چند ضلعی را به این قسمت بصورت smart object وارد کنید و با دستور Ctrl+T آنرا به اندازه دو ستون سیستم شبکه بندی تغییر سایز دهید. نام این لایه را border بگذارید . روی لایه دبل کلیک کرده و Color Overlay را با رنگ #d0cbc0 و خط دور را با رنگ #958f82 اضافه کنید.

لایه border را کپی کنید و روی آن راست کلیک زده و Clear Layer Style را انتخاب کنید . با استفاده از ابزار Ctrl+T اندازه این تصویر را کوچک کنید . نام این لایه را image_holder قرار دهید.

عکسی را که میخواهید به این قسمت اضافه کنید در فتوشاپ باز کنید . و آن را روی لایه image_holder قرار دهید و کلیک راست کرده و گزینه Create Clipping Mask را انتخاب کنید:

ابزار تایپ را انتخاب کرده و کمی متن بعد از عکس اضافه کنید برای سرتیتر از فونت Oswald با اندازه 24px و رنگ #a39f94 استفاده کرده ایم . برای پاراگراف ها از فونت Sans Light با اندازه 15 پیکسل و رنگ #5c574f استفاده کنید. و در پنل پاراگراف leading=24 px قرار میدهیم.

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

این مراحل را برای ایجاد ستون دوم از منطقه درباره ما تکرار کنید:

ایجاد پس زمینه فرم تماس با ما

قسمت تماس با ما شامل دو ستون است . یکی برای فرم تماس با ما و یکی برای قسمت تویتر ما به این دو قسمت کنتراست متفاوتی خواهیم داد.

قسمت فرم تماس با ما عریض تر از قسمت تویتر خواهید بود چرا که از آن مهمتر است و باید توجه بیشتری را جذب کند. برای رسیدن به این هدف ما از دو پس زمینه مستقل برای هر قسمت هم استفاده می کنیم.

یک پوشه جدید به نام Contact ایجاد کنید و درون آن پوشه ای به نام contact bg قرار دهید . با ابزار مستطیل گوشه گرد یک مستطیل گوشه گرد به اندازه های 620px * 360px ایجاد کنید و رنگ آن را #d0cbc1 بگذارید نام این لایه را border بگزارید و آن را به Smart Object تبدیل کنید.

دستور Filter > Noise > Add Noise را اجرا کنید و استایل لایه Stroke را با رنگ #958f82 به آن اضافه کنید:

ابزار مستطیل گوشه گرد را با گردشدگی 4 پیکسل انتخاب کنید و یک مستطیل با ابعاد 610px * 350px و رنگ #f5f2ea ایجاد کنید. این لایه را به قسمت وسط مستطیل گوشه گرد تیره تر ببرید.

نام این لایه را contact bg گذاشته و لایه را به Smart Object تبدیل کنید. به لایه فیلتر noise اضافه کنید. به لایه استایل لایه مطابق با عکس را ارائه داده و سپس خط دور با رنگ #f9f8f5 را به لایه اضافه کنید:

ایجاد فرم تماس با ما

با ابزار مستطیل و رنگ #faf9f8 یک فیلد ورود داده برای فرم تماس با ما ایجاد کنید. عرض این فیلد باید 350px. باشد ما در سمت راست این قسمت فضایی برای ورود اطلاعات بیشتر نیاز خواهیم داشت.

برای هرکدام از فیلت های تماس باما استایل لایه زیر را اعمال کنید ما از رنگ #d1cec7 برای خط دور استفاده کرده ایم.

متن های پیشفرض را به فیلد ها اضافه کنید در وب ویژگی به نام placeholder وجود دارد که در فتوشاپ هم باید آن را ایجاد کنیم. ما برای متن های این قسمت از فونت Sans Light با اندازه 13px و رنگ #847f76 استفاده خواهیم کرد . ما دکمه ارسال را با رنگ #aea89c و خط دوری به رنگ #8a857a ایجاد خواهیم کرد. سایر تنظیمات را مانند دکمه ای که قبلا اضافه کرده ایم تنظیم خواهیم کرد:

انتخاب ابزار تایپ برای ایجاد یک پاراگراف متن برای فرم تماس با عرض 190px و افزودن متن با فونت Sans Light در اندازه ی 15px و رنگ #5c574f و leading=24px به این قسمت.

انتخاب ابزار رسم خط و ایجاد یک خط افقی با ابعاد 1 × 190px و رنگ #c8c4bb و تغییر نام لایه به 1px line.

لایه خط افقی را کپی کنید و خط جدید را 2 پیکسل به سمت پایین بکشید. سپس هر دو خط را کپی کرده و هر دو را 1 پیکسل به پایین جابجا کنید. رنگ خطوط جدید را به #fcfaf6 تغییر دهید. تمام این خطوط را در پوشه ای به نام lines قرار دهید.

ما ایکون هایی را از وب دانلود و استفاده خواهیم کرد شما هم میتوانید همینکار را کرده ویا از ابزار رسم شکل سفارشی فتوشاپ استفاده کنید. ما یک دست را که به فرم تماس اشاره دارد را تغییر سایز داده ایم.

دست را به وسط خط میانی کشیده و با ابزار رسم ناحیه انتخاب مستطیل ناحیه تلاقی خط و دست را انتخاب می کنیم و سپس در پنل لایه روی پوشه lines کلیک کرده و دستور Layer > Layer Mask > Reveal All را اجرا خواهیم کرد.

به این لایه طبق تصویر زیر استایل دهید . و برای افکت Color Overlay رنگ #837e70 را انتخاب کنید.

با ابزار تایپ یک سری پاراگراف دیگر در زیر خط اضافه کنید ما اطلاعات ایمیل و تلفن و نام کاربری اسکایپ خود را اضافه کرده ایم. برای این پاراگراف ما از فونت Oswald Italic و Semibold Italic با اندازه های size=14px و رنگ #5c574f و یک خط فاصله بین هر دو خط متوالی استفاده کرده ایم:

گام 15: افزودن بخش تویتر

یک پوشه به نام Twitter ایجاد کرده و با استفاده از ابزار تایپ یک سرتیتر با فونت Oswald و size=24px, color=#a39f94 ایجاد کنید.

با ابزار رسم خط دو خط در زیر سرتیتر اضافه کنید رنگ اولی #bebbb1 و رنگ دومی سفید باشد.

حالا چند کادر متن ایجاد کنید و متنی را بعنوان متن تویتر تایپ کنید ما از فونت Oswald Italic و size=14px و color=#5c574f استفاده خواهیم کرد.

دکمه Follow us را با رنگ #a7c5bd و خط دور #83a098 ایجاد کنید:

گام 16: افزودن تیتر ها به گوشه وب سایت

از آنجا که این آموزش یک سایت تک صفحه ای است ما برای هر بخش از سایت یک تیتر قرار میدهیم که کاربر بداند در کدام بخش از سایت است . این سرتیتر ها در بخش navigation bar feedback. قرار خواهند گرفت.

یک پوشه به نام Headlines ایجاد کنید ابزار رسم خط را انتخاب کرده یک خط عمودی از بالای Services تا پایین Contact رسم کنید. این خط را 20 پیکسل از سمت چپ گوشه سمت چپ سایت فاصله بدهید نام این خط را 1px line بگذارید.

این خط را کپی کرده و خط جدید را 1 پیکسل به سمت چپ بکشید و رنگ آن را #fbfbfa بگذارید.

ابزار تایپ را انتخاب کنید و نام هر قسمت را بنویسید ما اینکار را در تصویر زیر انجام داده ایم . برای اینکار از فونت Muncie در ابعاد 36 پیکسل و رنگ #b5b2ac استفاده شده است. به این نوشته ها استایل Drop Shadow داده ایم :