نمایش نتایج: از شماره 1 تا 3 از مجموع 3
Like Tree5نفر پسندیدند
  • 5 ارسال توسط Mahshid

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

  1. #1
    مهشید فلاح
    تاریخ عضویت
    2012 January
    سن
    29
    ارسال ها
    294
    تشکر
    1,374
    تشکر شده 863 بار در 337 پست
    نوشته های وبلاگ
    10


    آيا اين پست براي شما سودمند بود؟ بله | خیر

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

    با سلام به همه کاربرای خوب انجمن
    امروز میخوام آموزش ساخت بنر متحرک رو توی انجمن قرار بدم
    امیدوارم توضیحاتم مفید باشه
    اگر سوالی براتون پیش اومد حتما مطرح کنید و دوست دارم وقتی این آموزش رو خوندید خودتون برید و فتوشاپ رو باز کنین و یه نمونه بسازید.مطمئنم شما میتونید بهتر از من طرح بزنید ...لطفا طرح هاتون رو اینجا قرار بدید
    من سعی میکنم یه نمونه ساده و در عین حال خوب بزنم
    خب فتوشاپ رو باز کنین.من از فتوشاپ 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 و یه مرورگر رو بزنین
    یادتون باشه شما اینو برای وب طراحی و سیو کردید بعدا نگید روش همین طوری کلیک کردما ...با مرورگر باید دیده شه
    اگه سوالی داشتید همین جا بپرسید

    موضوعات مشابه:
    Angehngte Grafiken
    • نوع فایل: jpg 14.jpg (190.3 کیلو بایت,  این فایل 3 بار دانلود شده است)
    ویرایش توسط Mahshid : 18th July 2013 در ساعت 11:38 PM دلیل: تکمیل آموزش
    Shojaee, Tishab, smm.azizi و 2 نفر دیگر این نویسه را می پسندند.
    امام جواد علیه السلام :
    ثَلاثٌ مَن کُنَّ فِیهِ لَم یَندَم: تَرکُ العَجَلة ، وَ المَشوِرَة ، وَ التَّوَکُلُ عَلَی اللهِ عِندَ العَزمِ؛
    سه چیز است که هر ** آن را مراعات کند ، پشمیان نگردد : 1 - اجتناب از عجله ، 2 - مشورت کردن ، 3 - و توکل بر خدا در هنگام تصمیم گیری .





  2. #2
    مهشید فلاح
    تاریخ عضویت
    2012 January
    سن
    29
    ارسال ها
    294
    تشکر
    1,374
    تشکر شده 863 بار در 337 پست
    نوشته های وبلاگ
    10


    آيا اين پست براي شما سودمند بود؟ بله | خیر
    اینم چند تا نمونه از این طرح ها ک با همین روش ساختم...
    امیدوارم دوست داشته باشید


    بنر اول
    بنر دوم
    بنر سوم
    بنر چهارم
    بنر پنجم





    در حال ویرایش


    ویرایش توسط Mahshid : 16th October 2013 در ساعت 09:17 AM
    امام جواد علیه السلام :
    ثَلاثٌ مَن کُنَّ فِیهِ لَم یَندَم: تَرکُ العَجَلة ، وَ المَشوِرَة ، وَ التَّوَکُلُ عَلَی اللهِ عِندَ العَزمِ؛
    سه چیز است که هر ** آن را مراعات کند ، پشمیان نگردد : 1 - اجتناب از عجله ، 2 - مشورت کردن ، 3 - و توکل بر خدا در هنگام تصمیم گیری .





  3. #3
    کاربر فعـال
    تاریخ عضویت
    2013 March
    ارسال ها
    101
    تشکر
    154
    تشکر شده 124 بار در 75 پست


    آيا اين پست براي شما سودمند بود؟ بله | خیر
    خیلی خوب بود . کاملا کاربردی . منم دارم درست میکنم . افرین . . بازم از این مطالب خوب بزارین لطفا .


 

 

کاربران برچسب خورده در این موضوع

علاقه مندی ها (Bookmarks)

علاقه مندی ها (Bookmarks)

مجوز های ارسال و ویرایش

  • شما نمیتوانید موضوع جدیدی ارسال کنید
  • شما امکان ارسال پاسخ را ندارید
  • شما نمیتوانید فایل پیوست کنید.
  • شما نمیتوانید پست های خود را ویرایش کنید
  •  


Powered by vBulletin
Copyright ©2000 - 2022, Jelsoft Enterprises Ltd.
Content Relevant URLs by vBSEO 3.6.0
Persian Language By Ustmb.ir
این انجمن کاملا مستقل بوده و هیچ ارتباطی با دانشگاه علوم و فنون مازندران و مسئولان آن ندارد..این انجمن و تمامی محتوای تولید شده در آن توسط دانشجویان فعلی و فارغ التحصیل ادوار گذشته این دانشگاه برای استفاده دانشجویان جدید این دانشگاه و جامعه دانشگاهی کشور فراهم شده است.لطفا برای اطلاعات بیشتر در رابطه با ماهیت انجمن با مدیریت انجمن ارتباط برقرار کنید
ساعت 02:10 AM بر حسب GMT +4 می باشد.