نوشته‌ها

فتوشاپ چیست | کاربرد های فتوشاپ |با فتوشاپ چه کار هایی میتوانیم انجام بدهیم؟ |

فتوشاپ چیست ؟

با سلام خدمت تمامی دوستان عزیز در این مقاله میخوام بهتون در مورد پیدایش فتوشاپ، و این که فتوشاپ چیست و کابرد های فتوشاپ، در چه چیزهاییه و با فتوشاپ

چه کارهایی میتونین انجام بدین.

قبل از شروع باید بدونید فتوشاپ چیست ؟

تاریخچه کوتاهی درمورد پیدایش فتوشاپ:

فتوشاپ، در سال ۱۹۸۸ توسط برادران نول (knoll) توماس و جا به وجود اومد.

در سال ۱۹۹۰ فتوشاپ توسط آقای جان وارنک (john Warnock)، رئیس شرکت ادوبی (adobe) خریداری شد.

نسخه اولیه فتوشاپ، برای سیستم عامل (مَک اپل) ارئه شد. و بعد از مدت ها برای سیستم عامل ویندوز هم ارائه شد،

همچنین با قدرت مندتر شدن سیستم عامل گوشی ها و خود گوشی ها فتوشاپ، برای موبایل ها هم ارائه شد

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

فتوشاپ چیست ؟

فتوشاپ، در واقع بهترین و قدرتمندترین برنامه ساخت و ویرایش تصاویر پیکسلی (pixels) به تصاویر دیجیتالیه.

پیکسل چیست؟

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

فتوشاپ، توسط چه کسانی استفاده میشود؟

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

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

فتوشاپ، در چه زمینه هایی کاربرد دارد؟

۱ : طراحی گرافیکی که شامل طراحی : پوستر، بنر، کارت ویزیت ،کاتالوگ، بنر استند و… میشه.

۲ : ویرایش عکس شامل: ویراش عکس، اصلاح عکس، روتوش تصاویر، ترکیب کردن تصاویر ، درست کردن متن های سه بعدی،

فتوشاپ چیست

۳ : طراحی رابط کاربری یا (ui).

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

۵ : طراحی کرارکتر انیمیشن، طراحی تصاویر برای کمیک ها،

امیدوارم از این مقاله که در مورد تاریخچه ی فتوشاپ،و اینکه فتوشاپ چیست ؟ لذت برده باشید

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

ساخت اکانت تلگرام و ویکی پدیای تلگرام

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

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

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

تلگرام برای بعضی از سیستم عامل ها در دسترسه ، مثل اندروید، آی او اس و ویندوز فون و تبلت ها و وسیله هایی که  وای فای ندارن.

مخاطبین این شبکه اجتماعی میتونن  تصاویر و فیلم ها رو تا حجم ۱٫۵ گیگابایت به هم ردو بدل کنند.

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

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

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

بزرگ ترین فیلترین این شبکه اجتماعی مرتبط با تظاهراتی که در سال ۱۳۹۶ در ایران بوده، رخ داد.

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

امنیت این شبکه اجتماعی در سال ۲۰۱۵ شرکت امنیتی غیر انتفاعی بنیاد مرزهای الکترونیکیرتبه ۴ از ۷  رو در قسمت پیام رسانی و در قسمت چت مخفیانه رتبه ۷ از ۷ به این شبکه اجتماعی دادن.

ساخت اکانت تلگرام همراه باعکس

مرحله : ۱

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

تصویر : ۱

ساخت اکانت تلگرام

مرحله : ۲

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

تصویر : ۲

ساخت اکانت تلگرام

مرحله : ۳

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

تصویر : ۴

ساخت اکانت تلگرام

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

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

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

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

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

مرحله: ۱

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

بعد از اینکه عکس رو روی مستطیل قرار دایدن کلید 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 رو انتخاب کنید و یک متن بنویسید.

تصویر: ۴۳

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

تصویر: ۴۴

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

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

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

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

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

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

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

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

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

لینک دانلود

مرحله: ۱۰

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

تصویر: ۱

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

برای این کار از قسمت ابزار، ابزار(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) رو بزنید.

تصویر:۴۹

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

تصویر:۵۰

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

ادامه دارد….