نوشته‌ها

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

طراحی قالب وبسایت قسمت سوم

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

تمام عکس های این قسمت را از اینجا دانلود کنید.
تصویر: ۱

طراحی قالب وبسایت قسمت سوم

مرحله: ۱

در مرحله اول طراحی قالب وبسایت میخواییم اسلاید شو رو درست کنیم.
برای ساخت اسلاید شو باید یک مستطیل رسم کنیم.
برای اینکار از قسمت ابزار، ابزار مستطیل رو انتخاب کنید و یک مستطیل رسم کنید.
تصویر: ۲
حالا یک عکس از منظره بارندگی یا هر عکسی که دوست دارید رو به داخل فتوشاپ بیارید و روی مستطیل قرار بدین.
تصویر: ۳
تصویر: ۴

بعد از اینکه عکس رو روی مستطیل قرار دایدن کلید enter رو بزنید.

حالا روی لایه عکس کلید راست کنید و گزینه ( create clipping mask) رو بزنید تا عکس داخل مستطیل قرار بگیره.

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

تصویر: ۵

طراحی قالب وبسایت قسمت سوم

تصویر: ۶

تصویر: ۷
حالا باید عکس قطره های باران رو سیاه و سفید کنیم.

برای اینکار طبق عکس پایین عمل کنید.

تصویر: ۸

حالا یک متن رو روی عکسمون مینویسیم.

برای اینکار از منوی ابزار، ابزار t رو انتخاب کنیید و یک متن به دلخواه بنویسید.

تصویر: ۹

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

تصویر: ۱۰

طراحی قالب وبسایت قسمت سوم

حالا باید Opacity رو کم کنید تا مستطیل کمرنگ بشه و متن شما واضح بشه.

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

تصویر: ۱۱

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

تصویر: ۱۲

برای کشیدن دایره، باید از منوی ابزار، ابزار دایره رو انتخاب کنید.

تصویر: ۱۳

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

تصویر: ۱۴

حالا چندتا کپی از دایره تون بگیرید.

برای اینکار ابزار move tool رو انتخاب کنید و کلید alt رو بگیرید و از دایره یک کپی بگیرید.

تصویر: ۱۵

طراحی قالب وبسایت قسمت سوم

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

تصویر: ۱۶

مرحله: ۲

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

تصویر: ۱۷

برای این کار ما باید یک مربع ۱۰۰ در ۱۰۰ پیکسل در ست کنیم.

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

تصویر: ۱۸

حالا یک مربع برای شما درست شده.

تصویر: ۱۹

حالا باید مربعتونو بچرخونید.

برای اینکار کلید ترکیبی (ctrl+T) رو بزنید و از نوار بالای صحفه درجه رو روی ( ۴۵- ) بزارید.

تصویر: ۲۰

طراحی قالب وبسایت قسمت سوم

حالا ابزار مستطیل رو انتخاب کنید و کلید alt رو نگه دارید و از قسمت بالای مربع تا وسط مربع بکشید تا به شکل مثلث دربیاد.

تصویر: ۲۱

حالا یک رنگ بهش میدیم.

تصویر: ۲۲

حالا باید یک کپی از مثلث بگیرید.

برای کپی گرفتن رو لایه مثلث کلید راست کنید و گزینه ( Duplicate Layer ) رو بزنید تا یک کپی گرفته بشه.

تصویر: ۲۳

حالا از منوی ابزار، ابزار ( Direct Selection tool ) رو انتخاب کنید.

تصویر: ۲۴

حالا باید گوشه سمت راست مثلث رو سلکت کنید و از نقطه فعال شده بگیرید و به سمت چپ بکشید.

تصویر: ۲۵

طراحی قالب وبسایت قسمت سوم

تصویر: ۲۶

حالا باید یک رنگ بهش بدیم.

برای این کار از منوی ابزار، ابزار move tool رو انتخاب کنید و رویه قسمت مشخص شده در عکس پایین دابل کلید کنید.

دقت کنید که روی لایه کپی شده اینکار انجام بدید.

تصویر: ۲۷

حالا از منوی ابزار، ابزارt رو انتخاب کنید و یک متن بالای مثلث بنویسید، برای مثال ادامه مطلب.

تصویر: ۲۸

مرحله: ۳

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

تصویر: ۲۹

برای طراحی قسمت بک گراند اول باید یک مستطیل درست کنیم.

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

درست کنید.

تصویر: ۳۰

طراحی قالب وبسایت قسمت سوم

حالا یک کپی ازش میگیریم.

برای گرفتن کپی روی لایه مستطیل کلید راست کنید و گزینه ( Duplicate Layer ) رو بزنید تا یک کپی از مستطیل گرفته بشه.

تصویر: ۳۱

حالا از منوی ابزار، ابزار ( Direct Selection tool ) رو انتخاب کنید و دوتا گوشه سمت راست مستطیل رو سلکت کنید و به

سمت چپ بکشید.

تصویر: ۳۲

تصویر: ۳۳

تصویر: ۳۴

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

تصویر: ۳۵

طراحی قالب وبسایت قسمت سوم

حالا طبق تصویر پایین مود رنگشرو عوض کنید.

تصویر: ۳۶

میبینید که رنگ قسمتی که درست کردید عوض شد.

حالا ابزار move tool رو انتخاب کنید و کلید alt رو بگیر و یک کپی از قسمتی که درست کردین بگیرید.

تصویر: ۳۷

حالا کلید ترکیبی ctrl+t رو بزنید و روی همون شکل کلید راست کنید و گزینه ( Flip Horizontal) رو بزنید تا شکلتون به صورت

افقی برعکس بشه.

تصویر: ۳۸

حالا دوباره روی همون شکل کلید راست کنید و گزینه ( Flip Vertical ) رو بزنید تا بصورت عمودی برعکس بشه.

تصویر: ۳۹

حالا به همین شکل کپی بگیرید و برعکس کنید. دیگه بستگی به سلیقه خودتون داره.

حالا متنی که اول کنار لوگو نوشتید رو کپی کنید و بیارید روی بک گراند.

تصویر: ۴۰

طراحی قالب وبسایت قسمت سوم

مرحله:۴

در مرحله چهارم طراحی قالب وبسایت میخواییم فوتر پاین صحفه رو درست کنیم.

تصویر: ۴۱

برای درست کردن فوتر از منوی ابزار، ابزار مستطیل رو انتخاب کنید و یک مستطیل با رنگ مشکی رسم کنید.

تصویر: ۴۲

حالاابزار t رو انتخاب کنید و یک متن بنویسید.

تصویر: ۴۳

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

تصویر: ۴۴

طراحی قالب وبسایت قسمت سوم

این هدیه ای بود از طرف امیر سهرابی شرق عضو تحریریه گروه فناورانه فردا طرح فعال در زمینه طراحی وبسایت در تهران و مشهد.

موفق و پیروز باشید.