|
مشخصات آموزش:
زمان حدودی: 30 تا 60
دقیقه
درجه سختی: مبتدی
نرم افزار های استفاده شده: ادوبی فتوشاپ
منبع: http://psd.tutsplus.com
|
اخیرا استفاده از روش «طراحی تخت» با استفاده از سایه بلند، متداول شده است. اما این روش لزوما پدیده ی جدیدی نیست. به نظر می رسد که این روش بیشتر برای اجزا و آیکون های طراحی سطحی کاربرد دارد اما حقیقت این است که این روش به طور فزاینده ای برای طراحی بخشی از وب سایت ها مورد استفاده قرار می گیرد. در این آموزش ما به شما نشان می دهیم که شما می توانید از 4 روش برای ایجاد سایه بلند در فوتوشاپ با استفاده از چندین ابزار مختلف بهره ببرید. بیایید شروع کنیم!
محصول نهایی (چیزی که شما خلق خواهید کرد)
عکسهای زیر در این آموزش استفاده شدهاند. می توانید قبل از جستجو برای جایگزین آنها، خود عکسها را دانلود کنید.
• Bebas
• Pacifico
معیارهای «سایه بلند»
دو معیار اصلی برای اثرات سایه بلند متصور است:
1. هر جزء طراحی باید یک نمونه ی تخت و سایه دو بعدی داشته باشد که حداقل 2.5 بار در قطر جزء گسترش پیدا کند. درنتیجه سایه بسیار بلندی ایجاد می شود که درام و تاکید مضاعفی به طراحی می افزاید.گام اول
یک صفحه 750*750 پیکسل ایجاد کنید و پشت زمینه ی آن را با رنگ #cf3f30 پر کنید.
گام دوم
رنگ پیش زمینه را #e74c3c قرار بدهید. ابزار Rounded Rectangle را انتخاب کنید، از منوی options ، Shape را انتخاب نمایید و شعاع را 10 در نظر بگیرید.
کلید Shift را فشار دهید و نگه دارید، سپس با فشار دادن و کشیدن ماوس یک چهارگوش 450 * 450 ایجاد نمایید.
گام سوم
یک متن با رنگ سفید ایجاد کنید. در این آموزش دو فونت متفاوت استفاده شده است اما شما می توانید از هر فونت و از هر متنی استفاده نمایید.
گام چهارم
برای خط اول متن، فونت Babas استفاده شده است و اندازه آن 100pt می باشد. در حالی که فونت خط دوم Pacifico با سایز 100 و فاصله خطوط 100 انتخاب شده است.
به خاطر داشته باشید که در طراحی تخت، عموما از فونت های ساده، bold و موج دار استفاده می شود.
گام پنجم
از طریق پنجره لایه ها، سه لایه ای که تاکنون ساخته اید را انتخاب کنید، ابزار حرکت (move tool) را برگزینید و برای اطمینان یافتن از هم مرکز بودن همه اجزاء بر روی آیکون Align horizontal centers از منوی options کلیک کنید.
2. یک زمینه ی سایه بلند با استفاده از ترکیب لایه ها بسازید
گام اول
رنگ پیش زمینه را مشکی کنید و ابزار چهارگوش (Rectangle Tool) را برگزینید. با گرفتن Shift و کلیک کردن و کشیدن ماوس یک چهارگوش بسازید که به صورت کامل همه زمینه را بگیرد. لایه جدید باید درست بالای لایه زمینه قرار بگیرد.
گام دوم
از آدرس Edit > Free Transform و یا با میانبر (CTRL/CMD + T) حالت Free Transform Mode را فعال کنید. سپس با فشردن و نگه داشتن کلید Shift چهارگوش مشکلی را به اندازه -45 درجه خلاف جهت عقربه های ساعت بچرخانید.
گام سوم
حالا کناره جهارگوش مشکی را بگیرید و ادامه دهید تا به گوشه های چهارگوش قرمز برسید.
گام چهارم
سمت چپ چهارگوش را انتخاب کنید و ادامه دهید تا به مرکز چهارگوش قرمز برسید. (بطور مورب). هنگامی که این کار را انجام دادید برای اعمال تغییرات بر روی آیکون ENTER/RETURN کلیک نمایید.
گام پنجم
مقدار Fill از لایه مشکی را به صفر تغییر دهید.
گام ششم
بر روی لایه چهارگوش مشکی دوبار کلیک کنید تا صفحه Gradient Overlay ظاهر شود. با انتخاب شیب تیره تا روشن شروع کنید. مقدار زاویه (Angle) را 45- قرار دهید و مقدار کدری (Opacity) را هر مقداری که دوست دارید (انتخاب این مقدار بستگی به میزان دقت و شدت سایه دارد که شما انتخاب می کنید). مقدار کاملا دقیقی که اینجا استفاده شده است 15% است.
گام هفتم
این پایه ای ترین روش برای ایجاد یک سایه بلند برای شکل های ساده است.
3. یک سایه بلند با استفاده از ابزار قلم (Pen Tool) ایجاد کنید.
ابزار قلم (Pen Tool) یک راه پیچیده برای ایجاد یک سایه بلند است. هرچند که این روش نسبت به روش های دیگر که در این آموزش به آن اشاره شده است پیچیده تر است، اما فرامین زیادی در اجرا کردن این روش بدست آورده و فرا می گیرید.
گام اول
یک لایه جدید بین لایه متن و لایه چهارگوش قرمز درست کنید. سپس ابزار قلم را برگزینید. (با رفتن به منوی Options و انتخاب Shape)
گام دوم
قبل از شروع به اضافه کردن نقاط تکیه گاهی، شما نیاز به اضافه کردن یک راهنما دارید تا بتوانید در مراحل یکسان نقطه گذاری نمایید. برای این کار از مسیر View > Rulers خط کش را انتخاب نمایید. (اگر شما قبلا این کار را نکرده اید) سپس بر بالای خط کش کلیک نمایید و به سمت پایین ادامه دهید تا یک راهنما ظاهر شود آنگاه آن را در بالای حروف قرار دهید.
این کارها تنها برای خط اول متن می باشد چرا که حروف بلندی های یکسان دارند. برای خط دوم، نقاط باید بدون استفاده از راهنما اضافه شوند.
گام سوم
برای اضافه کردن نقاط در بالا و گوشه ی هریک از حروف و در بین نقاط یک بار کلیک کنید. این کار را از بالاترین گوشه ی سمت چپ از اولین حرف شروع نمایید.
گام چهارم
هنگامی که به بالای گوشه راست آخرین حرف رسیدید، ابزار قلم را موازی سایه چهارگوش قرمز حرکت دهید و آن را امتداد دهید تا پایین گوشه راست چهارگوش قرمز را بپوشاند و یک نقطه در آنجا اضافه کنید. سپس این کار را برای گوشه سمت چپ پایین اولین حرف ادامه دهید و شکل را با برگشتن بر روی اولین نقطه ای که اضافه کرده اید، ببندید.
گام پنجم
ابزار Direct Selection Tool را برگزینید، سپس با گرفتن Shift بر روی نقاط تکیه گاهی که بین حروف اضافه کرده اید، کلیک نمایید.
گام ششم
ابزار انتقال (Move Tool) را برگزینید. سپس کلید پایین (Down Arrow) از صفحه کلید را فشار دهید تا نقاط انتخاب شده به سمت پایین حرکت کنند.
سپس کلید راست (Right Arrow) را فشار دهید تا نقاط به سمت راست حرکت کنند تا زمانی که خطوط برآیند موازی سایه ی اصلی لبه ها شوند. (اگر نیاز بود شما می توانید با استفاده از ابزار Direct Selection tool به خوبی این کار را انجام دهید)
گام هفتم
شما ممکن است بعد از این کار نیاز پیدا کنید تا برخی از نقاط تنها را اصلاح کنید یا برخی از فضاهای خالی را پاک نمایید، یا زوایای ایجاد شده را مرتب کنید. برای ای کار به سادگی از ابزار Direct Selection tool برای انتخاب نقاط استفاده کنید سپس آنها را هر طور که نیاز است تغییر دهید.
گام هشتم
فقط مطمئن شوید که خطوط سایه به صورت مناسب موازی یکدیگر هستند. شما می توانید یک خط با استفاده از ابزار خط (Line Tool) ایجاد کنید و آن را به اندازه ی زاویه ای که سایه را ایجاد کرده است، بچرخانید، سپس آن را به گوشه ی هر یک از حروف ببرید تا جایی را که نیاز به تغییر نقاط تکیه گاهی است با دقت پیدا کنید.
این یک روش طاقت فرسا و زمان بر است. اما همان طور که اشاره شد این روش کنترل های بیشتری را از نتیجه نهایی به شما می دهد. بنابراین شما نیاز دارید تا زمان خود را بر روی ایجاد و تکمیل آن بگذارید.
گام نهم
یکمرتبه شما باید شکل را آماده کنید، با استفاده از اعمال کردن Gradient Overlay که برای سایه چهار گوش قرمز استفاده شد. (گام ششم از روش دوم)
گام دهم
برای پاک کردن سایه های اضافی که از چهارگوش قرمز بیرون زده است، بر روی لایه سایه متن، راست کلیک کنید سپس Create Clipping Mask را انتخاب کنید.
نکته: برای ایجاد سایه خط دوم، یک بار دیگر ابزار قلم را برگزینید از منوی Options آیکون Combine Shapes را انتخاب کنید تا این سایه را براساس سایه قبلی اضافه کند.
اگر شما از فوتوشاپ مدل CS6 استفاده می کنید، شما می توانید سایه جدید را در یک لایه جداگانه ایجاد کنید سپس لایه های هر دو سایه را انتخاب کنید و آنها را با هم از مسیر Layer > Merge Layers ادغام کنید. این روشی که در این آموزش گفته می شود بهتر از فرآیندهایی است که در نرم افزار ایلوستریتور برای ایجاد سایه متن با ارتفاع حروف مختلف استفاده می شود
اگر شما دو سایه در دو لایه جداگانه ایجاد کردید، شما هنوز هم می توانید یک مدل زیبای متفاوت از سایه بلند داشته باشید و این می تواند شبیه به مدلی باشد که در گام هشتم از روش چهارم گفته می شود، باشد.
گام یازدهم
حالا برای متنی که اندازه حروف آن متفاوت است، شما نیاز دارید که بی درنگ یک سایه ایجاد کنید. اگر شما می خواهید که سایه ها ترکیبی باشند شما نیاز دارید که نقاط تکیه گاهی را تنها در جاهایی که دو سایه روی هم قرار نگرفته اند، قرار دهید. اما در این آموزش تمام فرآیندها به صورت کامل توضیح داده می شوند چرا که ممکن است شما بخواهید سایه ای به صورت جداگانه ایجاد کنید.
به دلیل اینکه فونت دومین خط از متن، فونتی شکسته و موج دار است، شما تنها به یک نقطه تکیه گاهی در بالای هر یک از حروف نیاز دارید و یک نقطه تکیه گاهی بین هر دو حرف.
یک بار دیگر تکرار می کنیم که مهمترین چیز این است که مطمئن شوید خطوط ، موازی سایه اصلی لبه هاست.
اینجا برای جاهایی که سایه ها رو هم نیفتاده اند جزئیات بیشتری وجود دارد. مثل قسمت پایین و سمت چپ حرف S . بنابراین شما اصولا نمی توانید نقطه پایانی را مستقیما به نقطه شروع متصل کنید. در عوض شما نیاز دارید که به یک روش آنها را از هم جدا کنید به گونه ای که امتداد سایه اصلی باقی بماند.
این ممکن است بسیار پیچیده تر از آن چیزی که هست به نظر برسد اما داشتن سایه اصلی به عنوان مرجع می تواند کار را راحت تر نماید.
گام دوازدهم
ابزار Add Anchor Point Tool را برگزینید و در جاهایی که فضاهای خالی وجود دارد و باید با سایه پر شود، نقطه هایی را اضافه کنید. سپس این نقطه ها را حرکت دهید تا این فضاها پوشیده شود. بالا و سمت چپ هر دو حرف S و L می بایست درست شود.
گام سیزدهم
اگر شما سایه ای را در لایه ی جداگانه ایجاد کردید، از Gradient Overlay استفاده کنید و آن را به لایه های سایه دیگر متصل کنید. (با ایجاد یک Clipping Mask)
گام چهاردهم
برای اولین روش، نیاز به دقت و توجه زیاد به بسیاری از جزئیات است، اما این یک روش غیر سه بعدی برای مهار زاویه سایه در یک لایه است.
نکته: یک اختلاف جالب از سایه بلند در نحوه محو شدن سایه در رنگ است.
برای رسیدن به آن شما به سادگی تنها با بازی کردن با مقدار درجه محو کردن می توانید به آن برسید. (Gradient Overlay) در اینجا مقدار 30% قرار داده شده است.
بنابراین شما می توانید چگونگی محو شدن سایه در نور را ببینید.
شما همچنین می توانید سایه را در اطراف حرکت دهید تا به سایه مورد نظر خودتان برسید.
تیرگی و مقدار درجه آن نمود سایه را کنترل می کنند. شما می توانید همچنین از Color Overlay به جای Gradient Overlay استفاده کنید اگر می خواهید که سایه به طور کامل محو شود.
4. با استفاده از «کپی کردن» و «اشاره کردن» سایه بلند ایجاد کنید
این یک راه بسیار راحت برای رسیدن به سایه بلند 45 درجه است.
گام اول
با کپی کردن یک لایه متن که دارید شروع کنید سپس آن را بگیرید و یک کپی زیر لایه اصلی ایجاد کنید.
گام دوم
رنگ لایه متنی کپی گرفته شده را به مشکی تغییر دهید.
گام سوم
به مسیر Edit > Free Transform بروید سپس با استفاده از کلید پایین و کلید راست. لایه کپی شده را یک پیکسل به سمت پایین و یک پیکسل به سمت راست حرکت دهید. برای قبول کردن تغییرات ENTER/RETURN بزنید.
گام چهارم
حالا برای تبدیل لایه، کلیدهای CMD/CTRL + ALT + SHIFT + T باهم فشار دهید. تا زمانی که قسمت پایین و سمت راست چهارگوش قرمز پوشیده شود این کار را تکرار کنید.
گام پنجم
تمام کپی لایه ها را انتخاب کنید و به مسیر Layer > Merge Layers. بروید تا لایه ها در هم ادغام شوند.
گام ششم
همان طور که دوست دارید از Gradient Overlay استفاده کنید. (گام ششم از روش دوم)
گام هفتم
بر روی لایه ی ادغام شده راست کلید کنید و Create Clipping Mask را انتخاب نمایید.
گام هشتم
شما می توانید از روش مشابه برای ایجاد سایه های جداگانه برای هر متن استفاده نمایید و آنها می توانند با روی هم قرار گرفتن یک اثر متفاوت و زیبا را خلق کنند.
برای اینکار هر خط از متن را در یک لایه متنی جداگانه بسازید. سپس همه ی لایه های متنی را انتخاب کنید و یک بار از آنها کپی بگیرید لایه ی کپی گرفته شده را زیر لایه اصلی یک بار حرکت دهید و رنگ فونت را به مشکی تغییر دهید.
گام نهم
اولین خط از لایه متنی کپی گرفته شده را انتخاب کنید و حالت Free Transform Mode را وارد کنید. (CTRL/CMD + T), سپس آن را یک پیکسل به سمت باپین و یک پیکسل به سمت راست حرکت دهید و برای قبول تغییرات کلید ENTER/RETURN را فشار دهید.
گام دهم
کلیدهای CMD/CTRL + ALT + SHIFT + T را فشار دهید تا از لایه کپی گرفته شود و این کار را تا پوشیده شدن کامل پایین و سمت راست چهارگوش قرمز ادامه دهید. سپس همه کپی ها را انتخاب کنید و آنها را با هم ادغام نمایید. (Layer > Merge Layers).
گام یازدهم
این کار را برای خط دوم لایه متنی نیز تکرار کنید.
گام دوازدهم
به طور مشابه از Gradient Overlay استفاده کنید و برای هر لایه سایه یک Clipping mask ایجاد کنید.
گام سیزدهم
شما همچنین می توانید سایه را محو کنید همانطور که در نکات سریع در پایان گام سوم گفته شد.
5. با استفاده از ابزار سه بعدی فوتوشاپ سایه بلند ایجاد کنید.
این روش سریع ترین و کارآمدترین روش است چون که هم ساده و به طور کامل قابل ویرایش است.
گام اول
لایه متنی را انتخاب کنید و به مسیر 3D > New 3D Extrusion from Selected Layer بروید. این کار لایه متنی شما را به لایه سه بعدی تبدیل می کند.
گام دوم
برای ویرایش، شما نیاز به باز کردن دو صفحه دارید: صفحه سه بعدی 3D و صفحه خواص Properies (هر دوی این صفحه در منوی Windows هستند) صفحه سه بعدی همه ی المان های مرحله ی سه بعدی را داراست در حالی که صفحه خواص تنها تنظیمات المانی که در صفحه سه بعدی است را نمایش می دهد.
با انتخاب نوار Current View از صفحه سه بعدی شروع کنید سپس از قسمت View در پایین صفحه ی خواص Top را انتخاب نمایید.
گام سوم
نام مش متنی را انتخاب کنید، بر آیکون Coordinates در بالای صفحه خواص کلیک کنید و X Rotation Angle را به 90 درجه تغییر دهید. بنابراین متن به صورت رو به بالا در می آید.
گام چهارم
بر روی آیکون Mesh در بالای صفحه خواص کلیک کنید سپس Extrusion Depth را به یک مقدار کاملا بزرگ تغییر دهید. در اینجا از 300 استفاده شده است.
گام پنجم
اگر شما نیاز داشتید که مقیاس متن را بالا و پایین کنید، کافی است با نزدیک و دور کردن این کار را انجام دهید. برای این کار از صفحه سه بعدی، بر Current View را کلیک کنید، ابزار Move Tool را برگزینید و از منوی Options در 3D mode آیکون Scale the 3D Object را انتخاب نمایید. سپس بر روی هر قسمت از محیط کار کلیک کرده و ادامه دهید. برای بزرگنمایی، ماوس را به سمت پایین بکشید و برای کوچک نمایی به سمت بالا.
گام ششم
دوست دارید صحنه چگونه به نظر برسد؟! در صفحه سه بعدی بر روی بخش Infinite Light 1 کلیک نمایید. سپس شما می توانید ادامه دهید و از صفحه مشخصات (Properties Panel) زاویه را در Y Rotation Angle به 45 درجه تغییر دهید. (البته بعد از کلیک کردن بر آیکون مختصات Coordinates در بالای صفحه مشخصات)
گام هفتم
یا شما می توانید از ابزار حرکت (Move Tool) استفاده کنید و نور را آن طور که می خواهید در محیط تنظیم نمایید. شما می توانید حرکت سایه را همانطور که نور را حرکت می دهید دنبال کنید. شما این کار را ادامه دهید تا به زاویه مورد نظر برسید.
گام هشتم
برای اینکه به رنگ واقعی متن اصلی که سفید هست برسید، شما نیاز دارید تا تنظیمات Front Inflation Material را انجام دهید. تا رنگ Specular را به سفید تغییر دهید و هر دو مشخصه روشنایی (Illumination) و محدوده (Ambient) رنگ ها را به مشکی تغییر دهید. سپس مشخصه درخشندگی (Shine) را صفر کنید.
بعد از اینکه این کار را ها انجام دادید، ایده ای مناسبی است که به مسیر 3D > Render بروید و ببینید که همه چیز چگونه به نظر می رسد. شما ممکن است نیاز به تغییر میزان برخی از این مشخصات با توجه به رنگ متن و زاویه روشنایی داشته باشید. برای مثال اگر رنگ متن یک مقدار تاریک است شما باید درخشندگی را به 100% برسانید.
گام نهم
زمانی که کار شما با تنظیمات Front Inflation Material به پایان رسید بر روی بخش Environment در صفحه سه بعدی کلیک نمایید در قسمت پایینی صفحه مشخصات، بخش Ground Plane را بیابید. در اینجا مقدار زاویه کدری سایه (Opacity) را به میزان دلخواه تغییر دهید. در اینجا مقدار 14 در نظر گرفته شده است.
گام دهم
به مسیر 3D > Render بروید تا محصول نهایی خود را مشاهده نمایید.
گام یازدهم
شما نمی توانید یک Clipping Mask برای یک لایه سه بعدی ایجاد نمایید. بنابراین این لایه را از مسیر Filter > Convert for Smart Filters به یک Smart Object تبدیل نمایید.
گام دوازدهم
سپس بر روی لایه Smart Object کلیک نمایید و Create Clipping Mask را انتخاب نمایید.
گام سیزدهم
اگر شما نیاز به ویرایش لایه سه بعدی داشتید کافی است بر روی لایه Smart Object دو بار کلیک نمایید.
گام چهاردهم
با این کار فایلی با لایه ی سه بعدی اصلی شما باز خواهد شد. شما سپس می توانید بر روی نام مش سه بعدی در صفحه سه بعدی کلیک نمایید و از قسمت پایینی صفحه مشخصات، Edit Source را انتخاب کنید.
گام پانزدهم
در اینجا هنوز یک فایل دیگر باز شده است که فایل جدید شامل لایه متنی است. شما می توانید هر تغییری که می خواهید اینجا انجام دهید مثل عوض کردن متن، فونت، اندازه و غیره. اگرچه همانطور که خواهید دید رنگ را باید در محیط سه بعدی تغییر دهید.
هنگامی که تغییرات را انجام دادید، فایل را ذخیره نمایید (File > Save) و آن را ببندید (File > Close).
گام شانزدهم
این کار شما را به فایل سه بعدیتان باز می گرداند و تغییراتی را که انجام داده اید را اعمال می نماید. اگر شما می خواهید رنگ را تغییر دهید از جعبه رنگ Diffuse استفاده نمایید. برای این کار شما باید مقدار درخشندگی Shine را تنظیم نمایید.
زمانی که این کار را انجام دادید، یک بار دیگر از فایل رندر بگیرید، آن را ذخیره نمایید و سپس ببندید.
گام هفدهم
حالا Smart Object در فایل اصلی به روز شده است.
تبریک! کار شما به پایان رسید
در این آموزش ما چندین روش که شما می توانید در فوتوشاپ سایه بلند ایجاد نمایید را توضیح دادیم. اولین روش نشان داد که چگونه می توان یک زمینه سایه با استفاده از شکل لایه ها خلق کرد سپس نشان دادیم که شما چگونه می توانید از ابزار قلم برای ایجاد سایه بلند در متن ها استفاده نمایید . بعد از آن ما به شما نشان دادیم که چگونه می توان از روش «کپی کردن» و «اشاره کردن» استفاده کرد در نهایت ما چگونگی استفاده از ابزارهای فتوشاپ سه بعدی را برای ایجاد سریع یک سایه بلند برای کار هنری تان به شما آموختیم. امیدواریم که شما در این آموزش چیزهایی را یاد گرفته باشید و بتوانید از این عناوین برای کمک به طراحی سایه بلند دلخواه تان استفاده نمایید.
منبع: http://psd.tutsplus.com