ساخت Loader در فتوشاپ | آموزش وردپرس|آموزش طراحی سایت|آموزش ووکامرس » ساخت Loader در فتوشاپ

ساخت Loader در فتوشاپ

در این مطلب می‌خواهیم یک گرافیک پیش‌بارگذار متحرک با پسوند gif ایجاد کنیم که می‌توانید که برای پروژه بعدی طراحی وب‌سایتتان استفاده کنید.(ساخت Loader در فتوشاپ)

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

  • ساخت شکل پیش‌بارگذار
  • طراحی استایل شکل پیش‌بارگذار
  • متحرک‌سازی پیش‌بارگذار

با ورود به گام نخست، کار را شروع می‌کنیم

گام ۱ از ساخت شکل : تنظیمات فایل

اول از همه، ابعاد را مشخص می‌کنیم و یک پس‌زمینه ساده اضافه کرده و کارهای زیر را انجام می‌دهیم:

۱. ایجاد یک فایل جدید در فتوشاپ از طریق مسیر File>New یا Ctrl + N

  1. تنظیم ابعاد داکیومنت به صورت 100 در 100 پیکسل

۳. دو بار روی لایه پس‌زمینه کلیک می‌کنیم و آن را به یک لایه معمولی تبدیل می‌کنیم

۴. رنگ‌های این لایه را به صورت خاکستری تیره دربیاورید. کد رنگ استفاده شده: #3d3d3d

Screen shot 2012-09-04 at 12.42.55 PM

گام 2 از ساخت شکل: الگوی پس‌زمینه

اول، یک الگوی خطی به پس‌زمینه اضافه می‌کنیم و سپس کار بر روی گرافیک پیش‌بارگذار را شروع می‌کنیم.

یک داکیومنت جدید ایجاد کنید ( با ابعاد ۷ در ۷ پیکسل) و با ابزار مداد سیاه‌رنگ یک خط مورب با ضخامت یک پیکسل در آن رسم ‌کنید. به این منظور می‌توانید از تکنیک نگه‌داشتن کلید Shift استفاده کنید؛ به این صورت که روی گوشه بالای سمت چپ با ابزار مداد کلیک می کنید و این کلید را نگه داشته و روی گوشه پایین سمت راست کلیک می‌کنید.

Screen shot 2012-09-04 at 12.43.00 PM

این الگو را تعریف کرده و نامگذاری کنید. از طریق مسیر زیر:

Edit menu > Define Pattern

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

Layer menu > Layer Style > Pattern Overlay

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

Screen shot 2012-09-04 at 12.45.21 PM

گام ۳ از ساخت شکل: ایجاد راهنما

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

– به این منظور از فرمان “Transform Again” برای سرعت بیشتر عملیات، استفاده خواهیم کرد.

یک خط عمودی یک پیکسلی با استفاده از ابزار خط (line) بر روی فایل طراحی‌تان بکشید.

Screen shot 2012-09-04 at 6.04.26 PM

برای آن‌که از وسط بودن این خط مطمئن شوید، لایه مربوط به این خط و لایه پس‌زمینه را باهم انتخاب کنید و مطابق شکل، روی گزینه “Align Horizontal Centers” کلیک کنید.

Screen shot 2012-09-04 at 12.47.15 PM

Screen shot 2012-09-04 at 12.47.10 PM

سپس خط را به اندازه ۴۵ درجه دَوَران دهید. می‌توانید به یکی از روش‌های زیر عمل کنید: انتخاب خط و سپس مسیر Edit menu> Free Transform و یا Ctrl + T

Screen shot 2012-09-04 at 12.47.35 PM

از مسیر Edit menu > Transform، در حالی که کلید Alt را نگه داشته‌اید، گزینه “Transform Again” را انتخاب کنید. می‌توانید به جای اینکه از ترکیب کلید‌های زیر استفاده کنید:

Control + Alt + Shift + T

این کار را چند مرتبه تکرار کنید تا خطوط در تمام زوایای گرافیک پراکنده شوند؛ به صورت زیر:

Screen shot 2012-09-04 at 12.48.16 PM

گام 4 از ساخت شکل: تنظیم علامت‌ها

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

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

Screen shot 2012-09-04 at 12.54.38 PM

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

View menu > Snap

Screen shot 2012-09-04 at 12.53.50 PM

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

Screen shot 2012-09-04 at 12.59.00 PM copy

برای قرار دادن این شکل در گرداگرد گرافیک پیش‌بارگذار، دوباره از تکنیک ‘Transform Again’ استفاده کنید. وقتی از دوران ۴۵ درجه استفاده می‌کنید، دقت کنید که نقطه انتقال، مرکز شکل انتخاب شود و نه مرکز مستطیل.

Screen shot 2012-09-04 at 1.00.32 PM

از مسیر Edit menu > Transform، در حالی که کلید Alt را نگه داشته‌اید، گزینه “Transform Again” را انتخاب کنید. می‌توانید به جای آن، از ترکیب کلید‌های زیر استفاده کنید:

Control + Alt + Shift + T

این کار را چند مرتبه تکرار کنید تا خطوط در تمام زوایای گرافیک پراکنده شوند؛ نتیجه کار باید به صورت زیر باشد:

Screen shot 2012-09-04 at 1.01.24 PM

بررسی لایه‌ها: دقت کنید که پنل لایه‌ها به صورت زیر باشد.

Screen shot 2012-09-04 at 1.01.10 PM

گام ۱ از طراحی شکل: ساخت علامت‌ها

تا اینجا، تمام شکل‌های موردنیاز برای گرافیک پیش‌بارگذار آماده شده است. اکنون می‌خواهیم یک سری استایل به لایه‌ها اضافه کنیم تا ظاهری آراسته داشته باشند. از مسیر Layer menu > Layer Styles یک سری استایل به لایه اضافه می کنیم.

از استایل “Color Overlay” برای رنگ دادن به لایه علامت‌ها استفاده کنید. در اینجا از کد رنگ #242424 استفاده شده است.

Screen shot 2012-09-04 at 1.03.39 PM

با استفاده از استایل “Drop Shadow” به لایه علامت‌ها، کمی سایه اضافه کنید.

Screen shot 2012-09-04 at 1.04.07 PM

از استایل ” Inner Shadow” برای ایجاد سایه داخلی در لایه علامت ها استفاده کنید.

Screen shot 2012-09-04 at 1.05.48 PM

اکنون گرافیک پیش‌بارگذار شما باید به شکل زیر باشد.

Screen shot 2012-09-04 at 6.50.18 PM

گام ۲ از طراحی شکل: نسخه‌برداری از لایه‌ها

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

چهار نسخه از لایه اصلی علامت ایجاد کنید؛ سپس علامت‌های اضافی هر لایه را حذف کنید تا به نتیجه زیر برسید:

Screen shot 2012-09-04 at 1.17.51 PM

می‌توانید برای پاک کردن اشکال علامت در داخل هر لایه از ابزار ” Direct Selection” استفاده کنید.

گام3 از طراحی شکل: ایجاد استایل برای لایه‌ها

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

برای لایه‌ای با نام “Shine-Active”، استایل “Outer Glow” را استفاده می کنیم:

Screen shot 2012-09-04 at 1.20.49 PM

برای همین لایه، استایل “Inner Glow” را نیز اضافه می‌کنیم.

Screen shot 2012-09-04 at 1.20.56 PM

سپس استایل “Color Overlay” را نیز برای این لایه استفاده می‌کنیم. ( کد رنگ استفاده شده: #0087C6)

Screen shot 2012-09-04 at 1.20.59 PM

برای لایه “Shine-Fading1” همان استایل‌های بالا را استفاده می‌کنیم و فقط اضافه کردن استایل “Outter Glow” را از مراحل حذف می‌کنیم.

Screen shot 2012-09-04 at 1.21.32 PM

برای لایه “Shine-Fading2” استایل “Inner Shadow” را تنظیم می‌کنیم.

Screen shot 2012-09-04 at 1.22.18 PM

برای همین لایه، از استایل “Color Overlay” نیز استفاده می‌کنید. در اینجا کد رنگ استفاده شده، #0087C6 است.

سپس برای لایه‌ای با نام “Shine-Fading3″، از استایل “Inner Shadow” استفاده کنید. در این حالت، تنظیم شفافیت را فراموش نکنید.

Screen shot 2012-09-04 at 1.22.37 PM

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

Screen shot 2012-09-04 at 1.22.54 PM

گام ۱ از متحرک‌سازی شکل: دسته‌بندی و نسخه‌برداری لایه‌ها

تا اینجا، تنظیمات اساسی استایل را انجام داده‌ایم و وقت آن رسیده تا از لایه‌ها نسخه‌برداری کرده و آن‌ها را در یک مجموعه جای دهیم و انیمیشن gif خودمان را ایجاد کنیم.

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

Layer menu > Group Layers

Screen shot 2012-09-04 at 1.23.28 PM

یک نسخه دیگر از این گروه ایجاد کنید و آن را 45 درجه دوران دهید (از طریق Edit menu > Free Transform). این گام را تا زمانی که علامت‌ها تمام گرداگرد گرافیک را بپوشانند، ادامه دهید. در مجموع، شما باید ۸ گروه داشته باشید.

Screen shot 2012-09-04 at 1.25.53 PM

اکنون پیش‌بارگذار شما باید شکلی شبیه به تصویر زیر داشته باشد.

Screen shot 2012-09-04 at 1.26.02 PM

گام ۲ از متحرک‌سازی شکل: ایجاد انیمیشن

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

ابتدا، پنل انیمیشن را باز کنید:

Window > Animation

تمام گروه لایه‌های علامت‌ها را به جز اولین علامت، غیرفعال کنید. سپس در پنل انیمیشن روی گزینه “Duplicate Selected Frames” کلیک کنید.

Screen shot 2012-09-04 at 1.26.42 PM

در ادامه، اولین گروه لایه را غیر فعال کنید و دومی را فعال کنید.

Screen shot 2012-09-04 at 1.26.47 PM

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

Screen shot 2012-09-04 at 1.27.38 PM

از منوی File به بخش “Save for Web & Devices” و تنظیمات زیر را برای فایل متحرک gif انجام دهید.

Screen shot 2012-09-04 at 1.28.19 PM

فایل gif خود را باز کنید و به خودتان افتخار کنید!

سخن پایانی

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



نمایش نظرات “ساخت Loader در فتوشاپ”

  1. حسن گفت:

    آموزش خوب و مفیدی بود..ممنون

Add Comment Register



پاسخ دهید

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

ورود اعضای سایت

ماهنامه باشگاه وردپرس

دانلود رایگان

ما را دنبال کنید

نمادها

اینستاگرام



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

فیلم آموزشی را همین الان برایم ایمیل کن

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

ثبت اطلاعات و دانلود فیلم

برای ثبت نام لطفا اطلاعات خود را وارد کنید

ثبت نام

برای ثبت نام لطفا اطلاعات خود را وارد کنید

ثبت نام
چند ثانیه تا دانلود فاصله دارید!
کافی است آدرس ایمیلتان را وارد کنید
ما هم مثل شما از ایمیل های مزاحم متنفریم
چند ثانیه تا دانلود فاصله دارید!
کافی است آدرس ایمیلتان را وارد کنید
ما هم مثل شما از ایمیل های مزاحم متنفریم
چند ثانیه تا دانلود فاصله دارید!
کافی است آدرس ایمیلتان را وارد کنید
ما هم مثل شما از ایمیل های مزاحم متنفریم
دانلود این فیلم آموزشی با کیفیت اصلی
کافی است آدرس ایمیلتان را وارد کنید
ما هم مثل شما از ایمیل های مزاحم متنفریم
دانلود اولین ماهنامه تخصصی وردپرس
کافی است آدرس ایمیلتان را وارد کنید
ما هم مثل شما از ایمیل های مزاحم متنفریم