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

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

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

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

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

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

لینک دانلود

مرحله: ۱۰

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

تصویر: ۱

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

برای این کار از قسمت ابزار، ابزار(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 یک کپی بگیرید و داخل باکس قرار بدید ، و روی دکمه ورود به بخش پشتیبانی را بنویسید.

تصویر: ۵۴

تصویر: ۵۵

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

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

ادامه دارد….

 

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

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

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

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

اگر مایلید در رابطه با وردپرس و یا دیگر cms های دیگر مانند جوملا بدانید مطلب لینک شده را مطالعه بفرمایید.

تفاوت وردپرس و جوملا

 

 

قبل از شروع کار لطفا این فایل را دانلود کنید و عکس هارو ببینید

لینک دانلود

 

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

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

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

تصویر :۱

اندازه صحفه رو روی ۱۰۲۴ در ۷۶۸ پیکسل با رزولیشن ۷۲ و (color mode) روهم روی (RGB color) بزارید و بعد روی (Create) کلید کنید.

مثل عکس پاین.

 

تصویر:۲

 

برای شروع کار ما به یک بک گراند (Backgraond) داریم از قسمت پاین سمت راست روی (create new) کلید راست میکنیم و گزینه(solid color) رو میزنیم ( طبق عکس پایین ).

تصویر:۳

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

کد رنگ (e2e2e2) رو وارد میکنیم و ok رو میزنیم.

تصویر:۴

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

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

برای کشیدن یک نوار باید از قسمت ابزار ، ابزار (rectangle tool) رو انتخاب میکنیم .

تصویر:۵

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

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

تصویر:۶

تصویر:۷

خوب در سمت راست پایین صحفه روی لایه ها دوبار کلید چپ میکنید (دابل کلید) و یک رنگ روشن به نوار بدید.

تصویر:۸

مرحله:۳

در مرحله سوم ( طراحی قالب وب سایت ) شما باید به منوی (Blending options) برید.

برای این کار شما باید در قسمت لایه ها رو همون لایه کلید راست کنید و گزینه (Blending options) رو انتخاب کنید یا رو همون قسمت که کلید راست کردید دوبار کلید چپ بزنید(دابل کلید) و به منوی (Blending options) میرید مثل عکس پایین.

تصویر:۹

در پنجره باز شده روی گزینه (Gradient Overlay) بزنید و تیک (Reverse) رو فعال کنید.

(Reverse) جای تیرگی و روشنی عوض میکنه و ما میخوایم قسمت تیره تر رو بالا باشه پس (Reverse) رو فعال میکنیم.

و روی قسمت رنگی (Gradient) میزنیم و یک پنجره جدید برای ما باز میشه.

تصویر:۱۰

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

در پنجره باز شده روی (color stop) دوبار کلید چپ کنید(دابل کلید) و در پنجره باز شده یک رنگ روشن بهش میدیم  و برای (color stop) سمت راستمشم همین کارو انجام میدیم.

تصویر:۱۱

تصویر:۱۲

تصویر:۱۳

مرحله ۴:

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

برای کشیدن خط ها از قسمت ابزار، ابزار(line tool) رو انتخاب میکنیم و بالای نوار یه خط سفید میکشیم.

برای صاف کشیدن خط کلید (Shift) روی کیبورد رو نگه دارید تا خط صاف کشیده بشه.

تصویر:۱۴

مثل عکس پاین خط به نوار چسبیده باشه.

تصویر:۱۵

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

خوب حالا باید از همون نوار یک کپی بگیرید.

برای کپی گرفتن ابزار(move tool) رو انتخاب میکنیم و کلید (Alt) بروی کیبورد رو نگه میداریم و خط رو به سمت پایین میکشیم. وقتی به سمت پایین کشیدید باید یک کپی گرفته شده باشه و اونو به پاین نوار بچسبونید.

تصویر:۱۶

مرحله ۵:

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

برای رسم دکمه ما از منوی ابزار، ابزار( Rounded rectangle tool) رو انتخاب میکنیم و یک مستطیل با گوشه های گرد شده میکشیم و از قسمت (Propertirs) قسمت (۲) مشخص شده در عکس رای روی عدد (۶)  بزارید.

تصویر:۱۷

تصویر:۱۸

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

برای رنگ دادن روی همون لایه کلید راست کنید و از منوی (Blending options) ،گزینه (Gradient Overlay) رو میزنیم ویک رنگ بهش میدیم.

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

(یکم سلیقگی کنید و یه تیف رنگی خوشگل درست کنین).

تصویر:۱۹

تصویر:۲۰طراحی قالب وب سایت

تصویر:۲۱

مرحله۶:

در مرحله ششم ( طراحی قالب وب سایت ) میخواییم یک سایه به دکمه ای که طراحی کردیم بدیم.

برای درست کردن سایه رو همون لایه کلید راست میکنیم و (Blending options) میزنیم و در پنجره ای که باز میشه (Drop Shadow) رو انتخاب میکنیم.

Opacity روی ۷۵،درجه Angle روی ۹۰٫ Distance روی ۰٫ Size روی ۲٫ و بعد اوکی رو بزنید و می بینید که یک سایه زیر دکمه تون درست شد.

تصویر:۲۳

تصویر:۲۴

 

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

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

تصویر:۲۵

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

برای انتخاب رنگ و اندازه و فونت نوششتتون میتونید روی آیکون هایی که وقت نوشتن ظاهر میشه انتخاب کنین.

تصویر:۲۶

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

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

برای انتخاب دوتا لایه باهم دیگه باید کلید (Ctrl) روی کیبورد رو نگه داریم و بعد روی دوتا لایه کلید چپ کنیم.

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

تصویر:۲۷

مرحله۷:

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

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

برای کپی گرفتن ابزار (move tool) رو انتخاب کنید، از قسمت لایه ها، لایه متن و لایه دکمرو انتخاب کنید و از روی شکل با گرفتن کلید (alt) یک کپی بگیرید و به سمت چپش بکشید.

اگه میخواین هم تراز کنید همزمان که کلید (alt) رو گرفتید و دارید کپی دکمرو به سمت چپ میبرین کلید(Shift) رو هم نگه دارید تا با دکمه اولی تو یک راستا باشن.

تصویر:۲۸

خوب حالا میخوایم رنگ دکمرو عوض کنیم.

برای عوض کردن رنگ دکمه  روی همون لایه کلید راست کنید و از منوی (Blending options) ،گزینه (Gradient Overlay) رو میزنیم ویک رنگ بهش میدیم.

دقیقا مثل کاری که با دکمه قبلی انجام دادیم فقط رنگشو عوض میکنیم.

تصویر:۲۹

تصویر:۳۰

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

تصویر:۳۱

خوب رنگ متنمونم تیره تر میکنیم مثل عکس پاین.

تصویر:۳۲

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

شما با این کار دکمه های فهرست وب سایتو طراحی میکنین و متنشو میتونین عوض کنین و درباره ما یا تماس با ما یا هرچیزی که بخواین میتونین بزارین.

مرحله ۸:

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

تصویر:۳۳

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

برای درست کردن مستطیل باید از قسمت ابزار ، ابزار (rectangle tool) رو انتخاب کنیم و یک مستطیل بکشیم.

شبیح عکس پاینی.

تصویر:۳۴

حالا رنگشو یکم تیره تر میکنیم یا کد (efefef) رو بزنید.

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

تصویر:۳۵

 

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

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

تصویر:۳۶

مرحله ۹:

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

برای ساختن لایه جدید قسمت سمت راست پاین صحفه میتونید لایه جدیدی درست کنید یا کلید ترکیبی( ctrl+shift+alt+n ) رو بزنید و یک لایه جدید درست کنید.

تصویر:۳۷

خوب از قسمت بالای نوار منوی (filter) گزینه(render) و گزینه(clouds) رو میزنیم و یک ابر سیاه و سفید درست میکنیم و بعد با زدن (ctrl+D) سلکشنی که درست کردیم حذف میشه.

تصویر:۳۸

تصویر:۳۹

خوب حالا لازمه که ابر سیاه سفیدمونو به (Mosaic) تبدیل کنیم.

برای این کار بازهم همون لایه ابر سیاه و سفید رو انتخاب کنین و از نوار بالا، منوی  (filter)گزینه (pixelate) و گزینه (Mosaic) انتخاب میکنیم.

از پنجره باز شده (Cell Size) روی ۶۵ بزارید و اوکی بزنید.

تصویر:۴۰

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

تصویر:۴۱

تصویر:۴۲

خوب حالا Mosaic رو میخوایم کجش کنیم.

بررای کج کردن یا مورب کردن Mosaic روی همون لایه، از نوار بالای صحفه منوی (filter) گزینه(Blur) و گزینه(Motion Blur) رو میزنیم.

از پنجره باز شده (Angle) روی ۹۰ و (Distance) روی ۲۴۶ میزاریم و اوکی رو میزنیم.

تصویر:۴۳

تصویر:۴۴

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

برای این کار روی همون لایه کلیک راست کنید و گزینه( Create Clipping Mask) رو میزنیم و میبینید که ستون های عمودی ما به داخل مستطیل رفتند.

تصویر:۴۵

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

تصویر:۴۶

حالا لازمه که کجشون کنیم.

برای این کار همون لایه رو انتخاب کنین و (Ctrl+T) رو بزنید و روی مستطیل کلید راست کنید و گزینه (Skew) رو بزنید.

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

تصویر:۴۷

تصویر:۴۸

برای اینکه اون گوشه که خالی شده رو پر کنید دوباره روی همون مستطیل کلید راست کنید و گزینه (Free Transform) رو بزنید.

تصویر:۴۹

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

تصویر:۵۰

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

ادامه دارد….

 

بروشورچیست

                   بروشورچیست

 

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

با یک مثال شروع میکنم

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

درکنار قرص ،شربت و…که داخل یک جعبه قرار گرفته اند یک کاغذی گذاشته شده است

که تعدادی برگه به هم متصل است.

به انها بوشور میگویند.

بروشور ها برای توضیح دادن، مطلع کردن و اطلاعات کامل راجع به خدمات ارائه شده به کار میرود.

کاغذ بروشور ها به صورت های مختلف روی یکدیگر تا میخورند که انواع مختلفی دارند.

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

اکثر بروشور ها آكاردئوني – شكمي يا تودلي می باشند و نام های ان به دلیل حالتهای ان متفاوت است.

راه های تولید يك بروشور و طراحی بروشور :

 

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

در گام  اول خلاقیت و نظر طراح به آنچه میخواهد عرضه کند و نظر و خلاقیت طراح برای طراحی بروشور بسیار با اهمیت  است

كه اين فكر و خلاقیت با در نظر گرفتن ویژگی های محصول ،  بینندگان محصول، ویژگی های موسسه متفاوت است .

سپس يك طرح ومتد ابتدایی میزنند تا کم و کاستی متن ها و سایز ها و نمونه کارها را در نظر بگیرند.

البته بهتر است برای طرح اولیه بجاي قرار دادن تصاوير و متن ها که وقت گیر است با تكه هاي روزنامه کامل  شود

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

حال که طرح اصلی مورد قبول واقع شد به جای  قطعه روزنامه متن ها و تصاویر لازم را جايگذاری میکنیم و شروع به طراحي میکنیم

مثله همه کارها که امروزه نرم افزارهای خاص خود را دارد اين كار هم اکثر مواقع با نرم افزارهاي  راحت تر انجام ميگيرد

 

همچنين محل روی هم رفتن كاغذ همچنین از اول بايد به طور دقیق و کامل مشخص شود چونکه مقداری بی  توجهي در تعیین كردن محل تا ، كل كارتان را به یک كاغذ بیوده و باطله تبديل ميكند .

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

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

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

انواع بروشور ها

۱- بروشور های تك لتی یا تک برگ:

 

اين بروشورچیست  : معمولا در يك برگ كه سایز هاي متفاوتی دارد میتوان یک رو یا دو رو چاپ شود  و به اين بروشور ها تك برگی میگویند.

 

۲ – بروشور های دولتي :

 

اين بروشورچیست :  از دو لت (برگ) به هم متصل تشكيل ميشود كه به نام دولتي معروف است اين بروشور همچنین در سایز هاي متفاوت چاپ ميشود .

۳-بروشور كتابي :

 

اين بروشورچیست  :  کاغذهایی بيشتراز ۲۰ صفحه و صحافي شده و در اندازه هاي كوچك و متوسط و بزرگ چاپ ميشود .

و بیشترمواقع با جلد کاغذ گلاسه پوشيده شده زيرا بعضي از آنها ممکن است  يك بار هم مطالعه نشود به همين دليل كمتر هزينه ميشود .

بیشترین استفاده ی ان در لوازم خانگي است که برای روش استفاده صحیح از دستگاه  به عنوان رايج ترين نوع اين بروشور ها در جامعه ديده ميشود

راه فعال سازی وسيله و خصوصیات و ویژگی های هر قطعه را به طور  كامل توضيح داده.

اطلاعات یک بروشور ميتواند تجاری ، اقتصادی ، سیاسی ، اجتماعي  و يا فرهنگي – هنري باشد .

در تنظيم يك بروشور جدا از تك لت ، آكاردئوني و يا ديگر اشكال بايد به مبحث و تیتر ،امكانات و كاربرد آن توجه شود .

چونکه اطلاعات عرضه شده در بروشورها ، کامل ،جامع و واضح هستند كه با مطالعه آنها ميتوان هدف ،روش ، عملكرد و سوي مبحث را فهميد .

بروشورچیست

عناصر موثر در طراحی بروشور

 

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

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

شاید تصور کنید که در عصر ارتباطات، دیگر نیازی به  طراحی بروشور چاپی ندارید، اما نظر خود را عوض کنید.

بروشوری که به صورت حرفه‌ ای طراحی و چاپ شده، می‌تواند یک وسیله بسیار موثر برای تبلیغات شما می باشد.

 تا خوردن صفحات  بصورتهای زیر است :

بروشور اکاردئونی  :

این بروشورچیست : اگر تا خوردن بروشور بصورت رو به پشت باشد یک بروشور اکاردئونی ساخته اید .

در حالت آکاردئونی پهنای لت ها معمولا هم اندازه تعیین می‌شوند.

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

این بروشورهای لتی را می توان دربی یا تودلی نیز نام برد.

 دربی:

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

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

علاوه بر دو روش  بالا که بیان کردیم در روش چیدمان و ارایش صفحات بروشورهای لتی،

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

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

بروشور هایی را که دارای تعداد صفحات کم هستند و معمولاً در نمایشگاه ها ارائه می شوند،

به حالت لتی طراحی و عرضه می کنند.

در بروشورهای فرمی:

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

تفاوت اصلی بروشورهای فرمی و بروشورهای لتی در این است

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

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

بروشورهای اسلیپ کیس:

این سبک بروشورچیست :

جلد آنها بصورت یک درایو یا پوشه  ساخته می شوند

صفحات داخل آن بطور خاص و جدا تولید می شوند،

سپس این صفحات در داخل جلد یا همان فولدر قرار می گیرند

پامفلت :

بروشوری است که دارای صفحات کمی است

جنس و ویژگی جلد و صفحات داخل آن از کاغذهای گرماژ استفاده می شود.

مانند اکثر دفتر راهنمای کالا.

لیفت لت:

نیز به برگه های کوچکی گفته می شود

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