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

قالب وب سایت با فتوشاپ.آموزش تصویری(قسمت دوم) طراحی قالب

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

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

در قسمت قبلی تا مرحله ۹ پیش رفتیم که خط های موربی برای هدر ایجاد کردیم.

در این قسمت به ادامه این مراحل میپردازیم.

عکس های این قسمت از آموزش را از لینک زیر دانلود کنید.

لینک دانلود

مرحله: ۱۰

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

تصویر: ۱

طراحی قالب وب سایت در فتوشاپ قسمت دوم

برای این کار از قسمت ابزار، ابزار(T) را انتخاب کنید و بر روی هدر صحفه یک متن با رنگ مشکی یا به دلخواه بنویسید.

برای مثال ما (fardatarh.ir) را مینویسیم.

تصویر: ۲

شما در قالب اصلی می بینید حروف ofogh.fardatarh  از همدیگر فاصله دارند.

تصویر: ۳

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

تصویر: ۴

حالا ابزار (move tool) را انتخاب کنین و متنتون را بگیرید و به داخل مستطیل حدایت کنید.

تصویر: ۵

طراحی قالب وب سایت در فتوشاپ قسمت دوم

مرحله: ۱۱

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

تصویر: ۶

برای ساخت لوگو باید یک دایره بکشید.

از قسمت ابزار، ابزار (Ellipse Tool) انتخاب کنید.

تصویر: ۷

حالا یک دایره روی هدر صحفه کنار متنتون بکشید، کلید (shift) رو هم نگه دارید تا دایره صاف کشیده بشه.

تصویر: ۸

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

تصویر: ۹

بعد از اینکه دایره را کشیدید باید یک گردنیت مثل دکمه نخست بهش بدیم.

برای اینکار روی لایه دکمه صحفه نخست کلید راست کنید و گزینه (Copy laer Styles) را بزنید.

تصویر: ۱۰

طراحی قالب وب سایت در فتوشاپ قسمت دوم

و روی لایه هلال ماه کلید راست کنید و گزینه( Paste leyer Style) رو بزنید تا هلال ماه مثل دکمه نخست رنگ بگیره.

تصویر: ۱۱

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

تصویر: ۱۲

بعد از اینکه کپی گرفتید کلید ترکیبی Ctrl+T رو بزنید و کوچیک ترش کنید تا داخل هلال بزرگ تر جای بگیره.

برای اینکه طول و عرض هلال به طور مساوی کوچک بشن کلید shift  راهم نگه دارید و از گوشه هاش بگیرید و مثل تصویر پایین درست کنید.

تصویر: ۱۳

خوب حالا دوباره با ابزار دایره ، یک دایره کوچک میکشیم و مثل کار قبل رنگ هلال ماه را به دایره خودمان میدهیم.

تصویر: ۱۴

مرحله: ۱۲

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

تصویر: ۱۵

طراحی قالب وب سایت در فتوشاپ قسمت دوم

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

تصویر: ۱۶

الان لازمه که لایه  مستطیل را به پایین لایه ها ببرید.

برای بردن لایه به پایین همه لایه ها کلید ترکیبی (shift+[) و برای بردن به بالای همه لایه ها کلید ترکیبی (shift+]).

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

تصویر: ۱۷

حالا میخواهیم یک سایه ملایم به بالای مستطیلمون بدیم مثل این عکسی که میبینین.

تصویر: ۱۸

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

تصویر: ۱۹

حالا از قسمت Properties ماسک را انتخاب میکنیم و (Feather) را روی ۷٫۹ قرار بدید.

تصویر: ۲۰

طراحی قالب وب سایت در فتوشاپ قسمت دوم

مرحله: ۱۳

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

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

تصویر: ۲۱

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

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

تصویر: ۲۲

تصویر: ۲۳

حالا لازم داریم که یک رنگ مثل کاری که برای دکمه نخست انجام دادیم انجام بدیم.

برای اینکار روی همون لایه کلید راست کنید و(blending Options) را انتخاب کنید و از پنجره باز شده (Gradient Overlay) انتخاب کند و یک تیف رنگی طوسی مثل کاری که با دکمه نخست کردیم انجام بدهید.

تصویر: ۲۴

تصویر: ۲۵

طراحی قالب وب سایت در فتوشاپ قسمت دوم

تصویر: ۲۶

تصویر: ۲۷

مرحله: ۱۴

در مرحله چهاردم طراحی قالب وب سایت میخواییم یک (Stroke) برای دور مستطیلمون ایجاد کنیم.

برای این کار در پنجره (Blending Options)  روی گزینه (stroke) را فعال کنید.

Size خط را روی ۱ وopacity را روی ۱۰۰ قرار بدید و رنگش هم سفید بزارید تا دیده بشه

تصویر: ۲۸

مرحله: ۱۵

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

برای این کار از لایه دکمه نخست یک کپی میگیریم.

برای کپی گرفتن از منوی ابزار، ابزار move tool را انتخاب کنید و با گرفتن کلید alt   یک کپی ایجاد کنید و به داخل مستطیلی که برای باکس جستجو ایجاد کردیم هدایت کنین.

تصویر: ۲۹

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

تصویر: ۳۰

طراحی قالب وب سایت در فتوشاپ قسمت دوم

و یک متن کنار دکمه بنویسید برای مثال جستجو در سایت….

تصویر: ۳۱

مرحله: ۱۶

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

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

بعداز اینکه آیکون هارو به داخل فتوشاپ آوردین ، اگر فرمتpng بود که هیچ راحت با ابزار move tool بگیریدش و به داخل پروژه اصلی بیاورید.

اگر عکس بود باید از منوی ابزار، ابزار  magic wand tool انتخاب کنید وروی آیکونتون کلید کنید.

اگر آیکونتون چند تیکه بود کلید shift را هم نگه دارید تا انتخاب بشوند.

تصویر: ۳۲

حالا ابزار move tool را انتخاب کنید و آیکون مد نظرتون را به داخل پروژه اصلی ببرید.

تصویر: ۳۳

تصویر: ۳۴

حالا برای کوچک کردن آیکون کلید ترکیبی ctrl+T را بزنید و با گرفتن کلید shift اندازه آیکون را کوچیکتر کنید.

تصویر: ۳۵

طراحی قالب وب سایت در فتوشاپ قسمت دوم

حالا نیاز دایم که متنی کنار آیکون بنویسیم.

برای این کار از منوی ابزار، ابزار T را انتخاب کنید و متنی کنار آیکون بنویسید.

تصویر: ۳۶

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

تصویر: ۳۷

مرحله: ۱۷

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

تصویر: ۳۸

برای طراحی این باکس ها نیاز داریم صحفه پروژه را بزرگتر کنیم.

برای این کار از منوی ابزار، ابزار crop tool را انتخاب میکنیم و از قسمت پایین صحفه میگیریم و قالبمون را بزرگتر میکنیم.

بعد از اینکه به اندازه مناسب رسید کلید enter را بزنید.

تصویر: ۳۹

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

از منوی ابزار، ابزار مستطیل را انتخاب کنید و مطابق تصویر پایین یک مستطیل رسم کنید.

تصویر: ۴۰

طراحی قالب وب سایت در فتوشاپ قسمت دوم

حالا میخواهیم خط هایی را اطراف مستطیلمون ایجاد کنیم.

تصویر: ۴۱

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

تصویر: ۴۲

مرحله: ۱۸

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

تصویر: ۴۳

برای ایجاد استیکر، از منوی ابزار، ابزار مستطیل را انتخاب کنید و یک مستطیل مطابق تصویر پایین رسم کنید.

تصویر: ۴۴

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

برای گرفتن کپی از کلید ترکیبی ctrl+j استفاده کنید.

و بعد از اینکه کپی ایجاد کردید کلید ترکیبی ctrl+t  را بزنید و از پایین مستطیل بگیرید وآن را به سمت بالا کوچیک کنید.

تصویر: ۴۵

طراحی قالب وب سایت در فتوشاپ قسمت دوم

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

تصویر: ۴۶

تصویر: ۴۷

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

و لایه کپی شده رو به زیر لایه مستطیل اصلی میبریم.

تصویر: ۴۸

حالا یک کپی از تمام کاری که در مرحله هفدهم و هجدهم انجام دادیم میگیریم.

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

تصویر: ۴۹

و حالا با گرفتن کلید alt یک کپی از تمام این لایه ها بگیرید و به سمت راست هدایت کنید.

تصویر: ۵۰

طراحی قالب وب سایت در فتوشاپ قسمت دوم

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

تصویر: ۵۱

حالا آیکون هایی رو مثل کاری که برای آیکون های بالاتر انجام دادیم انجام میدهیم و این آیکون هارو داخل استیکر ها قرار میدهیم.

تصویر: ۵۲

و حالا متنی داخل این باکس ها مینویسیم.

تصویر: ۵۳

حالا یک دکمه ( ورود به بخش پشتیبانی ) ایجاد میکنیم.

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

تصویر: ۵۴

تصویر: ۵۵

طراحی قالب وب سایت در فتوشاپ قسمت دوم

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

ادامه دارد….

 

0 پاسخ

دیدگاه خود را ثبت کنید

تمایل دارید در گفتگوها شرکت کنید؟
در گفتگو ها شرکت کنید.

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *