آموزش ساخت بنر متحرک برای وب سایت

**Mahshid** · 18th July 2013 12:43 PM

با سلام به همه کاربرای خوب انجمن
امروز میخوام آموزش ساخت بنر متحرک رو توی انجمن قرار بدم
امیدوارم توضیحاتم مفید باشه
اگر سوالی براتون پیش اومد حتما مطرح کنید و دوست دارم وقتی این آموزش رو خوندید خودتون برید و فتوشاپ رو باز کنین و یه نمونه بسازید.مطمئنم شما میتونید بهتر از من طرح بزنید ...لطفا طرح هاتون رو اینجا قرار بدید
من سعی میکنم یه نمونه ساده و در عین حال خوب بزنم
خب فتوشاپ رو باز کنین.من از فتوشاپ cs6 استفاده میکنم
از منوی file که بالا سمت چپ قرار داره گزینه new رو بزنید
1.jpg

صفحه ای باز میشه ک اونجا باید اندازه بنر رو تعیین کنین.هر اندازه ای که دوست داشتید میتونید بدید.من 120*240 pixel دادم.به عکس خوب دقت کنین تا پارامتر ها همین طور که من دادم باشه
(شمام دارین با من بنر میسازین دیگه؟

...آفرین

)

2.jpg

خب دکمه ok و ...

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

4.jpg

5.jpg

خب تا اینجا میاد همین کار ها رو میکنید و اکی رو میزنید
بعد میرید توی نوار ابزار سمت چپ اون شکلی که سطل رنگ مانند هستش رو انتخاب میکنید و روی سطح سفید کلیک میکنید
حالا دوباره میرید اون بالا و روی file کلیک میکنید و new میزنید و دوباره صفحه ای که باید مختصات بدید میاد
حالا باید اندازه ها رو 3 در 3 بزارید(قبلا 120 در 240 بود )
اکی که بکنین یه مینی صفحه میاد

6.jpg

حالا با اون ذره بین سمت چپ صفحه کوچیکه رو تا جایی ک میشه بزرگ کنید
7.jpg

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

روش دوبار کلیک کنین تا یه صفحه بیاد.اون رو اکی بزنید تا قفل باز بشه.الان دیگه قفل نداره درسته؟

8.jpg

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

9.jpg

خب حالا اون لایه ای که پایین هستش رو با delete پاک کنین (layer 0 ) رو میگم
حالا دکمه های ctrl +T رو با هم بگیرید.اینجوری شکل قابلیت حرکت داده شدن رو داره.با این کار یه منویی بالا فعال میشه و شما باید اونجا 45 درجه رو وارد کنین.
10.jpg

وقتی زاویه رو وارد کردین شکل یه تغییری میکنه.خب برای اینکه این ثابت بشه باید اون تیکی که کنار همین نوار ابزار بود رو بزنید
حالا برید بالا روی edit کلیک کنین و گزینه define pattern رو بزنین
11.jpg
بعد یه صفحه ای میاد که میخواد شما اکی بزنین.
هم اکنون چه باید کرد؟باید بریم روی همین صفحه ای که اول ساختیم
اندازه اش 120*240 بود...یادتون اومد؟برید روی اون صفحه دیگه به این کاری نداریم
اینجا رو با عکس و ترتیب عدد ها پیش برید
12.jpg

بعد از اینکه pattern overlay رو زدید یه صفحه تنظیمات میاد کشما باید از میون اون شکل ها اونی ک ساختید انتخاب کنین
عدد ها و پارامتر ها رو اون طور که من دادم بزارید
13.jpg

(فکر کنم تاپیک خیلی طولانی بشه

ولی گفتم با عکس توضیح بدم بهتر متوجه میشید.دیگه ببخشید )

خب حالا باید شکل کلی بنر رو بسازیم.با ابزار کشیدن مستطیل (قبلا باهاش یه مستطیل مشکلی کشیدیم یادتونه؟)
یه مستطیل به هر رنگی که دلتون میخواد بکشید و با ctrl +T اون رو اون طور که من انجام دادم جابه جا کنین
14.jpg

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

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

همین کار رو حالا با یه رنگ دیگه انجام بدید

17.jpg

خب حالا دوباره یه شکل دیگه میدید بهش
18.jpg
خب حالا باید یه متنی رو که میخواید تبلیغ شه رو وسط این متن بزارید
19.jpg
لطفا یکم صبور باشید تا تاپیک کامل شه
باور کنین خیلی طول میکشه

خب حالا ادامه میدیم
من همین الان از همه دوستان عذر خواهی کنم مثله اینکه عکس هایی ک آپ کردم نشون داده نمیشه!!! روی اسم عکس کلیک کنین میتونید ببنینیدشون .من در آخر هم کل عکس ها رو میریزم توی یه فایل و اینجا پیوست میشه
خب اونجا بودیم که یک متن رو توی بنر نوشتیم (مهشید )
برید در سمت راست و روی لایه ای که نوشته مهشید(برای من نوشته مهشید برای شما متنی هستش که خودتون نوشتید) و دوبار روش کلیک کنین(دابل کلیک)
یه صفحه ای میاد که سمت چپ چندتا گزینه داره
اینها رو اگه تیکشون رو بزنیداون قابلیت اجرا میشه و اگه بخواید ادیتش کنین روی اسم اونها یه بار کلیک کنین تا تنظیماتش بیاد
دقت کنین که حتما روی لایه مهشید دابل کلیک کرده باشید
از میون اون ها تیکه stroke رو بزنید و میبنید که یه خط مشکی رنگ دور متن شما رو گرفته
توی حالت دیفالت اندازه بردر اون 3 هستش و شما برای اینکه این خط کوچکتر بشه برید روی stroke یه بار کلیک کنین تا تنظیماتش بیاد
اونجا توی فیلد size عدد 2 رو بزارید (قشنگتر شد مگه نه ) ......حالا اکی بزنین
(یه توضیح کوچیک در مورد سایر گزینه ها بدم خوبه...اگر تیک بقیه گزینه ها رو بزنید باعث سایه دار شدن، bold شدن...میشه..اینجوری متن نرم تر میشه)
خب وقتی اکی رو زدید بیاید روی لایه مهشید و اون چشمی که کنار اسم لایه هست رو کلیک کنین تا هم اون چشم محو بشه و هم اسم مهشید محو بشه
وقتی مهشید محو شد دوباره بیاد و یه متن دیگه وسط شکل بنویسید(من نوشتم فلاح)
اینجوری یه لایه به اسم فلاح ایجاد میشه و شما برای اینکه اون زیبا تر بشه روی لایه کلیک میکنین و stroke... مثل همون کاری که بالا کردیم
20.jpg

خب حالا دوباره چشم کنار فلاح رو محو کنین...توی شکل بالا نگاه کنین چشم مهشید محو شده(چشم من نه ها

)
حالا برای اینکه بنر مون متحرک باشه مثلا اینجوری باشه کهاین نوار های رنگی دونه دونه وارد صفحه بشن و مهشید محو شه فلاح بیاد بعد اینا محو شه...

برای این اول باید این مستطیل های رنگی رو از صفحه ببریم بیرون
روی یه لایه کلیک کنین و با داشتن ctrl دوتا 3تا مستطیل بالا رو انتخاب کنین و بعدش از صفحه بکشینش بیرون
و همین طور 3تا مستطیل پایین
21.jpg

خب حالا باید باید از منوی windows گزینه timeline رو فعال کنین(واسه من فعال بود اگه واسه شمام فعال هست که بیخیال)
اون پایین فتوشاپ یه شکلی هست ک شبیه ساخت فیلم میمونه.فکر کنین چندتا برگه کاغذ دارین و برای اینکه شکل تون رو شبیه انیمیشن کنین روی هر برگ کاغذ یه تغییر جزئی ایجاد میکنین بعدش که این کاغذ ها رو زود حرکت بدید این شکل ها جوون میده و ما فکر میکنیم دارن حرکت میکنن
اینم همین طوره ...این ایده رو یکی از طراح های بزرگ بوده و برای ساخت فتوشاپ ازش استفاده شده...ما هر سری یه لایه میسازیم و توی هر لایه یه تغییر جزئی به شکل میدیم و یه زمانی هم تعیین میکنیم (ما به اندازه 0.1 ثانیه) برای اجرای برگه ها(اینجا لایه ها ) قرار میدیم
توی شکل طریقه ی ساخت لایه و تنظیم زمان نشون داده شده

24.jpg

حالا هر وقت که یک برگه رو ساختیت(از این به بعد به این ها میگیم برگه

) یه تغییر کوچیک به شکل بدید

25.jpg

میبینید توی شکل فقط یه ذره از مستطیل آبی رنگ رو آوردیم توی شکل ...بعد باید یه برگه جدید بسازید
باز یه ذره همین برگه آبی رو بیارید جلو تر
باز یه برگه جدید ...تا جایی که خودتون تعیین کردید که صفحه آبی چقدر جلو بیاد
بعد یه برگه دیگه و بعد لایه سبز بالایی رو یه ذره جلو بیارید
مثل مراحل بالا
با مستطیل های بالا هم همین کار رو بکنین
یادتون باشه توی هر برگه باید یه ذره شکل جلو بیاد ...
بعد که همه مستطیل ها اومدن سر جاشون چشم جلوی اسم مهشید رو فعال کنین
این باعث میشه اسم مهشید توی بنر دیده بشه
بالا قسمت لایه ها یه قسمت هست که برای هر لایه مقدار مشخصی هست
یه برگه درست کنین...روی لایه مهشید یه کلیک کنین...بالای لایه توی فیلد opacity مقدار 10% رو بدید
بعد یه برگه دیگه ...باز opacity رو بزارید روی 40%
.... همین قدر پیش برید تا 100% شه
حالا باز همین کار رو برعکس کنین
100%
80%
60%
40%
10%
0%
وقتی 0% رو بزارید مهشید محو میشه
حالا چشم فلاح رو روشن کنین

فلاح دیده میشه
همه مراحل بالا رو انجام بدید
0%
10%
40%
60%
80%
100%
100%
80%
60%
40%
10%
0%
خب حالا بنر رو ساختیت

باید save کنین
برید بالا و file و save for web رو بزنین(فکر کنم همین بود)
یه صفحه میاد و شما باید فرمت بنر رو انتخاب کنین
بالای صفحه سمت راست یه منو کشویی هست روی gif بزارید و حالشو ببرید
برای دیدنش باید روش راست کلیک و open with و یه مرورگر رو بزنین
یادتون باشه شما اینو برای وب طراحی و سیو کردید بعدا نگید روش همین طوری کلیک کردما ...با مرورگر باید دیده شه
اگه سوالی داشتید همین جا بپرسید

موضوعات مشابه: