Rich Graphic Designer

گرافیک یه رشته نیست یه سبک زندگیه (:

Rich Graphic Designer

گرافیک یه رشته نیست یه سبک زندگیه (:

بایگانی

طراحی کارت ویزیت با فتوشاپ

يكشنبه, ۲۴ آذر ۱۳۹۸، ۰۹:۵۰ ق.ظ

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

طراحی کارت ویزیت با فتوشاپ کافه پرگو
پروژه مورد نظر

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

مراحل طراحی کارت ویزیت

۱- طراحی بخش رویی کارت ویزیت
۲- طراحی یخش پشتی کارت ویزیت

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

۱- طراحی بخش رویی کارت ویزیت با فتوشاپ

۱-۱- تنظیمات ایجاد صفحه
۲-۱- رسم اشکال هندسی 
۳-۱- رنگ ها 
۴-۱- اُریب کردن شکل هندسی 
۵-۱- کپی گرفتن از لایه 
۶-۱- سیو کردن فایل 
۷-۱- آموزش قانون Researching 
8-1- طراحی بک گراند کارت ویزیت 
۹-۱- Opacity چیست؟ 
۱۰-۱- Zoom و Unzoom کردن 
۱۱-۱- رسم شکل هندسی دایره و تنظیمات آن
۱۲-۱- دور بری تصاویر 
۱۳-۱- طراحی آیکون ها 
۱۴-۱- تایپ وفونت ها

طراحی بخش رویی کارت ویزیت با فتوشاپ

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

چگونه یک کارت ویزیت با عکس طراحی کنیم؟
عکس های مورد نیاز طراحی

۱-۱- تنظیمات ایجاد صفحه

در ابتدا صفحه فتوشاپ رو باز می کنیم. یک صفحه جدید ایجاد می کنیم. برای ایجاد یک صفحه، از منوی بالا، قسمت File و بعد New وارد میشیم. اندازه ها هم که به شما گفتم و می تونید در هر اندازه ای که می خواهید این طرح رو ایجاد کنید. با واحد سانتی متر، اعداد رو روی ۹ و۶ میذاریم. color mood رو هم روی CMKY میذاریم. دلیل همه این انتخاب ها رو قبلا به شما گفتم.

نحوه ایجاد صفحه جدید برای طراحی کارت ویزیت با فتوشاپ
ایجاد سند جدید

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

۲-۱- رسم اشکال هندسی

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

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

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

فعال کردن گزینه تنظیمات اشکال هندسی
فعال کردن گزینه Properties

۳-۱- رنگ ها

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

۳-۱- رنگ ها

الف- انواع رنگ ها و نحوه رنگ کردن
ب- تنظیمات مربوط به پالت رنگ ها

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

الف- انواع رنگ ها و نحوه رنگ کردن

اولین کار، بعد از رسم مستطیل، انتخاب رنگ است. ما دو نوع رنگ داریم : ۱- رنگ داخلی ۲- رنگ دور خط
در همین قسمت تنظیمات، ما می تونیم برای داخل مستطیل یا دورش یک رنگ انتخاب کنیم. حتی می تونیم با علامت ضربدری که کنارش هست، هر کدوم از این گزینه ها رو غیرفعال کنیم.

انتخاب رنگ شکل ها برای طراحی کارت ویزیت
انتخاب رنگ

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

نکته : برای بزرگ یا کوچیک کردن مستطیل یا هر شکل دیگه، باید دکمه Shift رو نگه داریم تا در همون سایز، ابعادش تغییر کنه. اگر شیفت رو رها کنیم، اندازه اصطلاحا “دفرمه” میشه.

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

تبدیل شکل به لایه برای طراحی کارت ویزیت با فتوشاپ با rasterize کردن
تبدیل لایه

بعد از این که لایه رو تبدیل کردیم، روی همون لایه راست کلیک می کنیم و گزینه Blending Options رو انتخاب می کنیم.

تنظیمات لایه در فتوشاپ
تنظیمات لایه

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

تنظیمات مهم لایه ها
تنظیمات لایه ها

ب- تنظیمات مربوط به پالت رنگ ها

بعد از انتخاب color overlay و کلیک روی رنگ، پنجره ای به اسم color picker باز میشه. مود ها و کد های رنگی رو می بینیم. شما به عنوان یک گرافیست، باید رنگ ها و تنظیماتش رو بدونید. مود های cmyk و RGB وجود دارند که از ۰-۱۰۰ عدد می گیرند و ۱۰۰ یعنی سیاه در دستگاه چاپ. حالا می خواهیم رنگی رو که در پروژه اصلی استفاده کردیم رو انتخاب کنیم. اعداد CMKY اش رو کپی می کنیم. روی لایه خودمون کلیک راست می کنیم و پنجره تنظیمات رنگ رو باز می کنیم و همون اعداد رو در اونجا قرار میدیم. دقیقا همون رنگ روی کارمون نشست.

انتخاب رنگ CMYK در طراحی کارت ویزیت با فتوشاپ
تنظیمات رنگی CMYK

۵-۱- اُریب کردن شکل هندسی

تا حالا خیلی طراحی کارت ویزیت با فتوشاپ دیدید که اشکال به شکل اریب هستند و حتما براتون سوال وده که چجوری این کار رو انجام میدن مگه نه؟ بعد رسم و رنگ دادن به مستطیل رنگ شده، یک سری دستگیره هایی اطراف شکل ظاهر میشن. از این دستگیره ها، برای تغییر سایز، چرخوندن دورانی شکل و مورب کردن اضلاع شکل استفاده کنیم. به این صورت که دکمه Ctrl کیبورد رو نگه می داریم و دستگیره مورد نظرمون رو حرکت میدیم. می بینیم که خطمون اُریب و شبیهه پروژه اصلی شد.

اریب شدن مستطیل
اُریب کردن اضلاع مستطیل

۶-۱- کپی گرفتن از لایه

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

۶-۱- کپی گرفتن از لایه

a- از طریق راست کلیک روی لایه و Dublicate Layer 
b- با استفاده از کلید میانبر های Ctrl + J

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

a- کپی به روش Dublicate Layer

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

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

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

b- کپی گرفتن به روش کلید میانبر

یک طراح خوب به سرعت کارش معروفه. یعنی شما هر چی سرعتی تر کاری رو طراحی کنید، هم درآمدتون بیشتره و هم مشتریانتون راضی تر هستند. برای سرعتی کار کردن هم فقط باید کلید میانبر ها رو بلد باشید. کلید میانبر کپی گرفتن از لایه‌ها در فتوشاپ ، دکمه Ctrl + J هست. بعد از کپی گرفتن، دیگه لازم نیست دوباره تنظیمات رنگش رو از اول وارد کنید. فقط کافیه روی گزینه Effect پایین اسم لایه کلیک کنید تا مستقیم روی همون تنظیمات بره و بعد مثل مستطیل قبلی، شماره رنگ ها رو کپی می گیریم و در تنظیمات این شکل جدید پیاده میکنیم.

افکت رنگ دادن به لایه
افکت رنگ دادن به لایه

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

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

۷-۱- سیو کردن فایل ها

در حین کار، یک سیو از فایلمون می گیریم که به نوعی بکآپ به حساب میاد. از منوی بالا قسمت File، گزینه Save as رو می زنیم و در هر محلی که می خواهیم ذخیره می کنیم.

نحوه ذخیره کردن یک فایل در فتوشاپ
ذخیره کردن فایل

دوباره یک کپی دیگه هم برای شکل سوم، به همین ترتیبی که گفتم، می گیریم و تنظیماتش رو انجام می دهیم. برای کد رنگ ها، من فرض رو بر این میذارم که شما از خط کش رنگ من استفاده می کنید. درغیر این صورت، شما می تونید ازهر رنگی که می خواهید استفاده کنید.

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

۸-۱- قانون Researching

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

۸-۱- قانون Researching

a- نحوه سرچ کردن
b- بک گراند ها 
c- سرچ انگلیسی با ابزار Google Traslate 
d- سرچ تصاویر وکتوری 
e- سرچ آیکون 
f- قانون ” فوکوس و تمرکز ”

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

a- نحوه سرچ کردن

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

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

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

بخش سرچ تصاویر گوگل
Google Images

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

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

b- بک گراند ها

من اولین گزینه ای که به همه آموزش میدم، قسمت background ها است. شما بارها و بارها برای زدن یک کارت ویزیت، یک کاتالوگ، یک بروشور به یک بک گراند نیاز پیدا می کنید. مثلا اگر من کلمه بک گراند قرمز یا Background red، برای من کلی بک گراند با تم قرمز یا کلا قرمز میاره.

سرچ بک گراند قرمز برای طراحی
بک گراند قرمز

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

تصاویر پیشنهادی گوگل
تصاویر پیشنهادی گوگل

c- سرچ انگلیسی با ابزار Google Traslate

شاید برای خیلی هامون سرچ کردن به زبان انگلیسی سخت باشه و معنی بعضی کلمه ها رو ندونیم و کلا انگلیسیمون خوب نباشه. باید چیکار کنیم؟؟! اصلا نگران نباشید. بهتون میگم که چیکار می تونید بکنید. برای ترجمه هر کلمه و جمله به هر زبانی می تونیم از ابزار رایگان Google Traslate استفاده کنیم.

مترجم گوگل
Google Translate

d- سرچ تصاویر وکتوری

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

پیدا کردن وکتور تصاویر در گوگل
سرچ کردن وکتور تصاویر

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

تصحیح املای یک کلمه توسط گوگل
تصحیح املای یک کلمه توسط گوگل

به عنوان مثال، شما می تونید عبارت Coffee Cup رو سرچ کنید تا نمونه کارت هایی که با قهوه طراحی شدن رو ببینید.

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

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

چجوری یک عکس را از اینترنت دانلود کنم؟
Save کردن یک عکس

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

e- سرچ آیکون

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

چجوری آیکون یک تصویر را در گوگل پیدا کنم؟
سرچ Icon درگوگل

f- قانون ” فوکوس و تمرکز ”

یک مثال دیگه براتون میزنم. داخل Google Translat، عبارت ” دکوراسیون داخلی ” رو وارد می کنم و معادل انگلیسیش رو به همراه عبارت ” Vector ” در انتهاش، در Google Image سرچ می کنم. می بینیم که تمام طرح های گرافیکی رو برامون آورد. اگر خاطرتون باشه، گفتن از تکنیک ” فوکوس و متمرکز ” استفاده کنید و اطرافش فضای خالی داشته باشید. می تونیم همین طرح های متمرکز رو به عنوان کارت ویزیت استفاده کنیم. به این صورت که عکسی که از قانون فوکوس و تمرکز پیروی می کنه رو انتخاب می کنید و بعد کامل لود شدن، سیوش می کنید. نوشته های پایینش هم که در ادامه میگم چجوری رو پاک می کنید. یک سری نوشته های مربوطه رو مثل مشخصات و آدرس و … هم می نویسید و به راحتی تبدیل به یک کارت ویزیت میشه که کاملا ساده و شیکه که مشتری هم تشخیص نمیده خودتون طراحیش کردید یا نه.

وکتور دکوراسیون داخلی
سرچ وکتور دکوراسین داخلی و استفاده از آن

ازاین روش برای همه طراحی ها می تونیم استفاده کنیم. از جمله بروشور ها، کاتالوگ ها، لوگو ها و … . تمام سبک ها در سطح جهانی در حال رفتن به سمت ” اینفوگرافیک ” هستند. مقالات دیگه ای در سایت ماژیک آبی برای شما دوستان فراهم کردیم که در اون ها به طور مفصل در مورد اینفوگرافیک صحبت کردیم.

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

چگونه آیکون طراحی داخلی رو از گوگل پیدا کنم ؟
سرچ آیکون دکوراسیون داخلی

بعد از طراحی مستطیل های داخل کارت و پیدا کردن تصاویر و آیکون های مورد نیاز، میریم سراغ تکمیل یک سمت از کارت ویزیتمون.

۹-۱- بک گراند کارت ویزیت

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

جا به جا کردن لایه ها برای کارت ویزیت
جا به جا کردن لایه ها

۱۰-۱- Opacity چیست؟

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

چجوری یک عکس رو برای طراحی رویی کارت ویزیت در فتوشاپ شفاف کنیم؟
شفافیت عکس

برای اینکه بتونیم این مشکل رو حل کنیم، بالای لایه بک گراند، یک مستطیل رسم می کنیم و دور خطش رو هم برمی داریم. روی لایه مستطیل، راست کلیک می کنیم و گزینه Rasterize رو انتخاب می کنیم تا شکلمون به لایه تبدیل بشه. بعد از این، روی لایه، کلیک راست می کنیم و از قسمت Blending Options، گزینه Color Overlay رو کلیک می کنیم تا رنگ لایه رو تغییر بدهیم. با قطره چکان باکس رنگ، از رنگ مستطیل تیره تر می گیریم. بعد Opacity اون لایه رو کم می کنیم تا شبیهه طرح اولیه مون بشه.

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

نکته : یادتون باشه، در حین طراحی، هر چند وقت یک بار، دکمه Ctrl + S رو بزنید تا طرحتون ذخیره بشه.

۱۱-۱- Zoom و Unzoom کردن

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

روش های Zoom و Unzoom کردن

۱- استفاده از خود ابزار Zoom
2- استفاده از دکمه ترکیبی Alt و دکمه میدل روی موس

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

۱- استفاده از خود ابزار Zoom

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

ابزار زوم کردن در فتوشاپ
ابزار زوم کردن

۲- استفاده از دکمه ترکیبی Alt و دکمه میدل روی موس

درسته زوم کردن با ابزار زوم هم انجام میشه، ولی ما می خواهیم بدون این که دست به چیزی بزنیم، روی قسمتی زوم یا آن زوم کنیم. دکمه Alt رو نگه می داریم و دکمه میدل موس (دکمه وسط موس ) رو جلو یا عقب می بریم تا به میزانی از زوم برسیم که خودمون می خواهیم.

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

۱۲-۱- رسم شکل هندسی دایره و تنظیمات آن

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

رسم دایره در فتوشاپ برای طراحی کارت ویزیت
رسم دایره و رنگ کردن آن

۱۳-۱- دور بری تصاویر

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

بریدن عکس با ابزار Lasso برای استفاده در طراحی کارت ویزیت با فتوشاپ
بریدن قسمت های اضافی عکس با ابزار Lasso

برش با ابزار Quick Selection

بعد از برش کلی ناحیه های حذفی، این بار می خواهیم به دقت، اطراف فنجون، یا در واقع لوگو رو حذف کنیم. یکی از ابزارهای بسیار محبوب برش عکس در فتوشاپ که ما هم تو این آموزش طراحی کارت ویزیت با فتوشاپ ازش استفاده کردیم ابزار Quick Selection هستش. با ابزار Quick Selection ، یک کلیک روی قسمت های حذفی می کنیم و خودش به طور پیش فرض ناحیه های حذفی رو انتخاب می کند. با زدن دکمه Delete کیبورد، اون ناحیه ها حذف میشه. به همین ترتیب تمام ناحیه های اضافی رو حذف می کنیم.

برش عکس با ابزار Quick Selection
پاک کردن قسمتی از عکس با ابزار Quick Selection

۱۴-۱- طراحی آیکون ها

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

آیکون تلفن که خودش فرمت PNG هست و احتیاج به دور بری نداره. فقط سایزش رو با Ctrl + T کوچیک تر می کنیم. اون رو به لایه معمولی تبدیل می کنیم. بعد با Color Overlay که در Blending Options لایه قرار داره، رنگش رو سفید می کنیم.

اما برای آیکون خونه، اون رو تبدیل به یک لایه معمولی می کنیم. با ابزار Quick Selection، تمام قسمت های سفید رو انتخاب می کنیم. دکمه delete رو می زنیم و تمام اون قسمت ها پاک میشن. بعد از حذف کلی تمام قسمت های اضافی، رنگ اون روهم با Color Overlay ، سفید و بعد کوچیکش می کنیم.

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

۱۵-۱- تایپ و فونت ها

برای تایپ فارسی در فتوشاپ ، از نرم افزار LeoMoon استفاده می کنیم. نوشته ” این جا محل درج آدرس شما است” رو در این نرم افزار تایپ و کپی و در صفحه طراحی Paste می کنیم.

نرم افزار تایپ فارسی LeoMoon
نرم افزار تایپ فارسی LeoMoon

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

فونت آدرس و فاصله از حاشیه برای کارت ویزیت
فونت آدرس و فاصله از حاشیه

تایپ شماره تلفن

برای این که شماره تلفن مشتری رو جلوی آیکون تلفن بزنیم، دیگه لازم نیست همه اون مراحل قبلی برای تایپ رو انجام بدیم. فقط کافیه روی لایه نوشته آدرس یک کلیک چپ کنیم و با Ctrl+j، یک کپی از اون بگیریم. و نوشته اش رو تغییر بدهیم و شماره تلفن رو به جای اون بنویسم. 
نکته بعدی برای نوشتن شماره تلفن، اینه که خیلی خوبه که فاصله بین شماره ها رو رعایت کنید تا شماره تلفن مشتریتون خوانا تر بشه وهمه بتونن اون رو راحت تر به خاطر بسپرن.

فاصله اعداد شماره تلفن در تایپ فارسی
تایپ شماره تلفن

تایپ لوگوی کارت ویزیت

برای تایپ لوگو نوشته ی کارتمون، دوباره از همون نوشته آدرس یک کپی می گیریم و اون رو به ” کافه ” تغییر می دهیم. فونتش رو روی B Arshia میذاریم. سایزش رو هم تغییر میدهیم و بزرگترش می کنیم.

طراحی لوگو نوشته ای برای طراحی کارت ویزیت با فتوشاپ
تایپ لوگو “کافه”

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

تایپ لوگوی کارت ویزیت
تایپ کلمه ” پرگو “

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

کشیده کردن نوشته در فتوشاپ
کشیده کردن نوشته

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

تبدیل لایه تایپی به لایه ساده
تبدیل لایه تایپی به لایه ساده

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

چجوری در فتوشاپ یک نوشته رو برش بزنیم که در طراحی کارت ویزیت ازش استفاده کنیم؟
برش زدن نوشته و حذف نقطه ها

۲- طراحی بخش پشتی کارت ویزیت

۱-۲- تغییر سایز بوم طراحی
۲-۲- تبدیل کردن لایه ها به گروه
۳-۲- تکنیک پوشش لبه ها
۴-۲- تایپ اسم ” Caffee Peregoo ” 
5-2- تغیر رنگ نوشته 
۶-۲- کشیدن نقطه های تزئینی با ابزار براش 
۷-۲- ماسک کلیپ

طراحی بخش پشتی کارت ویزیت با فتوشاپ

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

۱-۲- تغییر سایز بوم طراحی

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

تغییر اندازه تصاویر در فتوشاپ
گزینه Convert Size

بعد از این که این گزینه رو انتخاب کردیم، باید درابتدا، واحد اندازه گیری روی سانتی متر قرار بدهیم. بعد سایز رو تغییر بدهیم. همونجور که می دونیم، این کارتمون، ۹ سانت طول و ۶ سانت ارتفاع داره. از اون جا که داریم روی همین صفحه خودش کار می کنیم، به اندازه طول کارت کاری نداریم و فقط ارتفاعش رو تغییر میدهیم. اگر می خواهیم که دقیقا همین اندازه باشه، به قسمت اندازه ارتفاع، ۶ واحد، که اندازه ارتفاع هست، اضافه می کنیم. ارتفاع کلی حالت جدید ۱۲ میشه.

تغییر اندازه صفحه برای بخشی پشتی طراحی کارت ویزیت
تغییر اندازه بوم تصاویر

بعد از اینکه سایز بوم رو تغییر دادیم، می بینیم که بعضی قسمت ها اضافی هستند. این ها همون قسمت هایی هستند که مخفی شدند.

مخفی شدن قسمت های اضافی در فتوشاپ
لایه های مخفی شده

۲-۲- تبدیل کردن لایه ها به گروه

وقتی تعداد لایه هامون زیاد شد، می تونیم از این روش استفاده کنیم تا بتونیم لایه ها رو مدیریت کنیم. برای تبدیل کردن لایه ها به گروه در فتوشاپ، همه لایه هایی که می خواهیم تبدیل بشه رو انتخاب می کنیم. دکمه های Ctrl + G رو میگیریم و همه داخل یک گروه قرار می گیرند. حتی اسم گروه ها رو هم می تونیم با دو بار کلیک کردن روی اون، عوض کنیم. مثلا اینجا من اسم گروه رو میذارم ” روی اول کارت “.

تبدیل کردن لایه ها به گروه در فتوشاپ
تبدیل کردن لایه ها به گروه

برای انتخاب لایه ها، تیک Auto Select روی Layer قرار میدیم. ولی برای این که کل اون قسمت روی اول کارت رو جابه جا کنیم، باید روی حالت Group قرار بدهیم.

برای حرکت دادن یک گروه در فتوشاپ چی کار کنیم؟
دکمه Auto Select

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

جا به جا کردن لایه ها
جا به جا کردن لایه ها

۳-۲- تکنیک پوشش لبه ها

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

پاک کردن دور خط تصاویر
تکنیک پاک کردن دور خط تصاویر

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

پوشش دادن دورخط رنگی تصاویر
پوشش دادن دورخط لوگو با رنگ تیره

۴-۲- تایپ اسم ” Caffee Peregoo “

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

تغییر سایز و مدل فونت نوشته
تغییر سایز و مدل فونت نوشته

۵-۲- تغییر رنگ نوشته

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

تغییر رنگ نوشته در فتوشاپ
تغییر رنگ نوشته

لوگوی طرح فنجون رو با نگه داشتن همزمان Alt و Shift، کوچک تر و شبیهه کارمون بشه.

تغییر سایز عکس با alt و shift
تغییر سایز عکس با Alt و Shift

۶-۲- کشیدن نقطه های تزئینی با ابزار براش

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

ابزار براش در فتوشاپ
ابزار براش

برای رسم دایره های بالای کارت، سایز روی ۳۷ میذارم و نرم بودن دور براش رو هم صفر می کنم چون می خواهم دایره به طور کامل رسم بشه.

تنظیمات براش مخصوص طراحی کارت ویزیت
تنظیمات براش

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

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

۷-۲- ماسک کلیپ

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

باید با لایه ی همون قسمت Clipping Mask بشه. به این صورت که لایه دایره ها رو جابه جا می کنیم تا روی لایه بک گراند قهوه ای پایینی قرار بگیره. بعد روی لایه دایره راست کلیک می کنیم و گزینه Creat Clipping Mask رو می زنیم. حالا نسبت به لایه قبلیش کلیپ شد و در واقع داخل اون قرار گرفت و دیگه اون قسمت های اضافیش دیده نمیشه.

ماسک کردن لایه ها برای طراحی کارت ویزیت با فتوشاپ
ماسک کردن لایه دایره ها

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

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

منبع : https://mazhikeabi.com/design-your-business-card-with-photoshop/

نظرات  (۰)

هیچ نظری هنوز ثبت نشده است

ارسال نظر

ارسال نظر آزاد است، اما اگر قبلا در بیان ثبت نام کرده اید می توانید ابتدا وارد شوید.
شما میتوانید از این تگهای html استفاده کنید:
<b> یا <strong>، <em> یا <i>، <u>، <strike> یا <s>، <sup>، <sub>، <blockquote>، <code>، <pre>، <hr>، <br>، <p>، <a href="" title="">، <span style="">، <div align="">
تجدید کد امنیتی