رفتن به مطلب

[TRgroup] ساخت بنر تبلیغاتی متحرک - فتوشاپ


partow

ارسال های توصیه شده

ساخت بنر تبلیغاتی متحرک - فتوشاپ

 

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

 

نتیجه نهایی:

 

f2.gif

 

گام 1:

 

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

 

پس یه سند جدید با طول و عرض 468x60 باز کنید...

 

برای حاشیه بنر :

 

- یک لایه جدید باز کنید و اسمش رو "Border" بزارید...

- کلیدهای Ctrl+A را بفشارید تا دور لایه انتخاب شود... به مسیر بروید Edit » Stroke و تنظیمات زیر را اعمال کنید :

 

Width: 1px.

Color: Black.

Location: Center.

Blending Mode: Normal.

Opacity: 100%

 

 

نتیجه:

 

 

 

 

1.gif

 

 

 

گام 2:

 

 

 

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

 

 

 

حال ابزار eclipse shape tools را فعال کنید و سمت راست بنر یک شکل تقریباً گرد ایجاد کنید...

 

 

 

2.gif

 

 

 

 

 

گام 3:

 

برای رنگ آن از ابزار گرادینت استفاده کنید ... پس به مسیر زیر بروید و تنظیمات را انجام دهید:

 

Layer » Layer Style » Gradient Overlay

 

 

gradient.gif

بهتره drop shadow and inner shadow هم اضافه کنید...کافیه opacity رو برابر با 20% قرار بدید...

 

نتیجه:

 

3.gif

 

گام 4:

 

میتونید اینجا برای زیر لوگو از ابزار Rounded Rectangle shape استفاده کنید ...

 

تنظیمات گرادینت رو مانند زیر انجام بدید:

 

gradient2.gif

 

بهتره stroke هم اضافه کنید:

 

Layer » Layer Style » Stroke

 

 

 

Stroke=2pixel

 

 

 

 

 

همچنین می تونید گرادینت خاکستری به سفید رو به لایه زیرین اضافه کنید تا بهتر به نظر بیاد...

 

 

 

 

 

نتیجه:

 

 

 

 

 

4.gif

 

 

 

 

 

 

گام 5:

 

 

 

 

 

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

 

 

 

 

 

ابزار type tool را فعال کنید و متن اولیتون رو تایپ کنید...( متنی که قراره در قاب (Frame) اول نمایش داده بشه)

 

 

 

 

 

5.gif

 

 

 

 

 

 

 

حال نمایش لایه Text رو غیرفعال کنید و با ابزار Type Tool در همون محلی که متن اولیتون رو نوشتید ، متن دومی هم تایپ کنید...

 

 

 

 

 

حالا باید پالت لایه هاتون شبیه شکل زیر باشه:

 

 

 

 

 

layersp.gif

 

 

 

 

 

 

و بنرتون شبیه شکل زیر:

 

 

 

 

 

6.gif

 

 

 

 

 

 

گام 6:

 

 

 

 

 

از این مرحله انیمشن شروع میشه...

 

 

 

 

 

پس بر روی دکمه "Switch to Imageready" کلیک کنید...

 

 

 

 

 

(در ورژن های جدیدتر فتوشاپ به منوی Window رفته و Animation رو باز کنید...)

 

 

 

 

 

پایین صفحه باید پالتی مانند شکل زیر ببینید:

 

 

 

 

 

animationpallete.gif

 

 

 

 

 

 

گام 7:

 

 

 

 

 

بر روی "New Frame" کلیک کنید ...

 

 

 

 

 

بر روی"Dublicate selectes Frame" کلیک کنید تا از فریم اول یک فریم کپی شود...

 

 

 

 

 

حال که فریم دومی انتخاب شده، لایه Text که در حالت نمایش است را از پالت Layer انتخاب کنید و به اندازه 2 پیکسل به سمت بالا بکشید ( 2 باردکمه اشاره گر بالا، روی کیبورد را فشار دهید)

 

 

 

 

 

نتیجه:

 

 

 

 

 

ani1.gif

 

 

 

 

 

 

گام 8:

 

 

 

 

 

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

 

 

 

 

 

حال از فریم آخر (فریم دوم) یک کپی بگیرید و Text رو به اندازه 10 پیکسل به سمت پایین بکشید و opacity لایه رو برابر 70% قرار بدید...

 

 

 

 

 

7.gif

 

 

 

 

 

 

گام 9:

 

 

 

 

 

از فریم آخر یک کپی بگیرید ...

 

 

 

 

 

حدود 15 پیکسل به سمت پایین بکشید و opacity لایه رو به 40% کاهش دهید....

 

 

 

 

 

8.gif

 

 

 

 

 

 

گام 10:

 

 

 

 

 

از فریم آخر یک کپی بگیرید...

 

 

 

 

 

لایه Text که در حال نمایش است را از حالت نمایش خارج کنید و نمایش لایه Text دیگر را فعال کنید... این متن را دقیقاً در جای Text قبلی قرار دهید و opacity لایه را برابر 40% کنید...

 

 

 

 

 

9.gif

 

 

 

 

 

گام 11:

 

 

 

 

 

از فریم آخر یک کپی بگیرید...

 

 

 

 

 

حال متن خود را به اندازه 15 پیکسل به سمت بالا بکشید و opacity لایه رو برابر با 70% قرار بدید...

 

 

 

 

 

10.gif

 

 

 

 

 

گام 12:

 

 

 

 

 

از فریم آخر یک کپی بگیرید...

 

 

 

 

 

متنتون رو به اندازه 10 پیکسل به سمت بالا بکشید و opacity رو برابر 100% قرار بدید...

 

 

 

 

 

11.gif

 

 

 

 

 

گام 13:

 

 

 

 

 

از فریم آخر یک کپی بگیرید...

 

 

 

 

 

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

 

 

 

 

 

12.gif

 

 

 

 

 

 

گام 14:

 

 

 

 

 

تا الآن باید 8 فریم ایجاد شده باشه...

 

 

 

 

 

همین مراحل رو از گام 12 (فریم 7) به گام 7 (فریم 2) دوباره انجام بدید ...

 

 

 

 

 

اگر همه مراحل رو به درستی انجام داده باشید باید حدود 14 فریم ایجاد شده باشه ...

 

 

 

 

 

 

گام 15:

 

 

 

 

 

پایین هر فریمی "0 sec." رو میبینید، که این عدد فاصله زمانی هر فریم رو نشون میده ...

 

 

 

 

 

ما می خوایم که شما همه ی اینها رو به "0.05" یا "0.1" تغییر بدید... بستگی به میزان سرعت مورد نظر خودتون داره ...

 

 

 

 

 

برای اینکه به 0.05 تغییر بدید، بر روی پیکان کنار "0 sec" کلیک کنید و "Other" را انتخاب کنید...

 

 

 

 

 

0.05 را وارد کنید...

 

 

 

 

 

delay.gif

 

 

 

 

 

 

گام 16:

 

 

 

 

 

برای نمایش انیمیشن بر روی دکمه Play Animation کلیک کنید ...

 

 

 

 

 

f1.gif

 

 

 

 

 

 

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

 

 

 

 

 

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

 

 

 

 

 

پس، فریم #1 را انتخاب کنید و زمان توقف رو برابر با 2 seconds قرار بدید ...

 

 

 

 

 

حال دومین فریم ،جایی که نوشته ها به راحتی خوانده میشوند، ( واسه من فریم #8 هستش) را انتخاب و زمان را 2 seconds قرار دهید...

 

 

 

 

 

حال به انیمیشن خود نگاه کنید:

 

 

 

 

 

f2.gif

 

 

 

 

 

اگر جایی با مشکلی برخوردید فایل PSD رو دانلود کنید تا ببینید من چطور انجام دادم...

 

 

 

 

 

 

منبع:

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

 

 

 

 

دانلود فایل PSD

 

  • Like 19
لینک به دیدگاه
بسیار عالی ............................... زحمت کشیدی واقعا ..:icon_gol:

 

 

خواهش میکنم ... :icon_gol:

دست نویسندش درد نکنه ... من فقط ترجمه کردم ... :icon_redface:

  • Like 4
لینک به دیدگاه

یک لایه جدید باز کنید و اسمش رو "Border" بزارید...

- به مسیر بروید Edit » Stroke و تنظیمات زیر را اعمال کنید :

 

 

Width: 1px.

Color: Black.

Location: Center.

Blending Mode: Normal.

Opacity: 100%

 

وقتی یک لایه جدید میسازم و و در همان لایه قرار می گیرم و Edit » Stroke را میزنم با پیام خطای زیر روبرو میشم؟

ezy66fixg7396gkt7tq.jpg

  • Like 3
لینک به دیدگاه
وقتی یک لایه جدید میسازم و و در همان لایه قرار می گیرم و Edit » Stroke را میزنم با پیام خطای زیر روبرو میشم؟

ezy66fixg7396gkt7tq.jpg

 

ممنون که گفتی ... اصلاحش کردم ... :icon_gol:

ایول! :ws50: دستت واقعا درد نکنه ... :flowerysmile:

 

خواهش می کنم ... :icon_redface::icon_gol:

  • Like 2
لینک به دیدگاه

خب وارد گرادینت که شدی ...

a0011naeak6zinnaxi5b.jpg

 

 

فقط باید رنگش رو به رنگ زیر تغییر بدی ...

 

gradient.gif

 

درسته؟

  • Like 3
لینک به دیدگاه

درسته مرسی:icon_gol::icon_gol::icon_gol:

در واقع اول روی دستگیره ها ی طیف رنگ کلیک می کنیم بعد کد را وارد می کنیم

زود جواب ندادی من هم از یک حقه استفاده کردم:icon_pf (34):

در فایل اصلی که قرار داده بودی ویژگیها را بدون وارد شدن به پنجره گرادیان کپی -پیست کردم:TAEL_SmileyCente:

 

یه سوال دیگه

بهتره stroke هم اضافه کنید:

 

 

Layer » Layer Style » Stroke

 

Stroke=2pixel

وقتی میخام برای آبجکت زرد رنگ حاشیه(stroke) قرار بدم گزینه stroke غیر فعاله

در خود لایه آبجکت زرد رنگ قرار دارم دکمه ctrl را فشار دادم و روی لایه هم کلیک کردم دور شکل هم انتخاب شد ولی باز هم گزینه stroke غیر فعاله؟:ws36:

  • Like 2
لینک به دیدگاه

درسته مرسی:icon_gol::icon_gol::icon_gol:

در واقع اول روی دستگیره ها ی طیف رنگ کلیک می کنیم بعد کد را وارد می کنیم

زود جواب ندادی من هم از یک حقه استفاده کردم:icon_pf (34):

در فایل اصلی که قرار داده بودی ویژگیها را بدون وارد شدن به پنجره گرادیان کپی -پیست کردم:TAEL_SmileyCente:

 

پسر بد... :icon_pf (34):

 

نبینمت این طرفا ...:w00:

 

 

 

یه سوال دیگه

 

وقتی میخام برای آبجکت زرد رنگ حاشیه(stroke) قرار بدم گزینه stroke غیر فعاله

در خود لایه آبجکت زرد رنگ قرار دارم دکمه ctrl را فشار دادم و روی لایه هم کلیک کردم دور شکل هم انتخاب شد ولی باز هم گزینه stroke غیر فعاله؟:ws36:

 

اینجا؟

 

تنظیمات گرادینت رو مانند زیر انجام بدید:

 

gradient2.gif

 

بهتره stroke هم اضافه کنید:

 

Layer » Layer Style » Stroke

 

 

 

 

Stroke=2pixel

 

 

چطور غیر فعاله ... ؟

 

وقتی گرادینت رو ایجاد کردی روی چک باکس Stroke کلیک کن ... حل شد ... یا سوال چیزه دیگه ای بود؟ :JC_thinking:

 

gqckf1ztw7nr6w3jzrw.jpg

  • Like 2
لینک به دیدگاه

چطور غیر فعاله ... ؟

 

 

وقتی گرادینت رو ایجاد کردی روی چک باکس Stroke کلیک کن ... حل شد ... یا سوال چیزه دیگه ای بود؟ :JC_thinking:

 

حلههههه:4uboxsmiley:

پسر بد... icon_pf%20(34).gif

 

نبینمت این طرفا ...:w00:

فقط یه سوال دیگمو جواب بده اونوقت میرم :ws42:

تا شما باشی دیگه آموزش فتوشاب نزاری:2525s:

چطوری فایلی را که ساختم ذخیره کنم تا حالت فلش داشته باشه؟:scared9:

  • Like 1
لینک به دیدگاه

 

حلههههه:4uboxsmiley:

 

 

فقط یه سوال دیگمو جواب بده اونوقت میرم :ws42:

تا شما باشی دیگه آموزش فتوشاب نزاری:2525s:

چطوری فایلی را که ساختم ذخیره کنم تا حالت فلش داشته باشه؟:scared9:

 

 

از طریق Alt + Shift + Ctrl + S می تونی ذخیره کنی...

وقتی ذخیره شد ، بهتره با Internet Explorer بازش کنی ...:flowerysmile:

  • Like 2
لینک به دیدگاه
×
×
  • اضافه کردن...