آموزش طراحي بنر فلش با فتوشاپ

فتوشاپ ، آموزش فتوشاپ ، ابزار فتوشاپ ، فيلم آموزش فتوشاپ ، photoshop ، آموزش photoshop ، آموزش رايگان فتوشاپ

آموزش طراحي بنر فلش با فتوشاپ

۴,۸۶۹ بازديد

آموزش طراحي بنر فلش با فتوشاپ

با يكي ديگر از آموزش طراحي بنر تبليغاتي براي وب سايت در خدمت شما هستم . سعي ميكنم نمونه هايي را براي شما شبيه سازي كنم كه در سايتهاي مختلف مورد استفاده قرار مي گيرد و كاربران هميشه به دنبال طراحي چنين نمونه هايي مي باشند . اميدوارم از اين طراحي لذت ببريد . بعد از انجام آموزش نظرات خودتان را براي ما در قالب تيكت ارسال كنيد .

فتوشاپ را اجرا كنيد

1. يك صفحه به ابعاد 60×468 ميليمتر با رزوليشن 72 ايجاد كنيد .

2. در مرحله بعدي مي خواهم براي پس زمينه يك الگو يا Pattern انتخاب كنم .خوب الگو مورد نظر من در فتوشاپ وجود ندارد و بايد به صورت دستي ساخته شود . براي انجام اينكار ابتدا يك صفحه به ابعاد 8×8 پيكسل ايجاد ميكنم البته بدون پس زمينه و بعد از آن با ابزار Rectangle Tool چهار كادر 8×1پيكسلي با درصد رنگي d2cec9 ميكشم .

Banner-Design-Tutorial1

بعد از ايجاد صفحه جديد از منوي Edit>Define Pattern را انتخاب و يك نام دلخواه براي اين اگو تايپ كنيد

Banner-Design-Tutorial2

روي لايه پس زمينه دابل كليك كرده و گزينه Pattern Overlay را انتخاب و الگو مورد نظر را از ليست الگوهاي پيش فرض انتخاب كنيد

Banner-Design-Tutorial3

Banner-Design-Tutorial4

Banner-Design-Tutorial5

3. يك لايه جديد ايجاد كرده و رنگ پيش فرض آن را با درصد رنگي efdba2 جايگزين ميكنم  . مد لايه را برابر با Saturation قرار بدهيد .

Banner-Design-Tutorial6

4. بعد از ايجاد پس زمينه اصلي نوبت ميرسه به قسمت هايي كه مي خواهيم در آيكون فلش از آنها استفاده كنيم . يك كادر با ابزار rectangle Tool كشيده و بعد از آن بر روي لايه مورد نظر دابل كليك كرده و تنظيمات پيش فرض گزينه هاي مشخص شده را تغيير ميدهم  .

Banner-Design-Tutorial7

Banner-Design-Tutorial8

Banner-Design-Tutorial9

Banner-Design-Tutorial10

Banner-Design-Tutorial11

5. در مرحله بعدي يك آيكون كه از اينترنت دانلود كرده ام را در پوشه كادر كشيده شده قرار داده و هر دو لايه را با هم به يك لايه تبديل مي كنم . بعد از قرار دادن آيكون در جاي مشخص شده با استفاده از ابزار تايپ ، يك متن را داخل كادر تايپ ميكنم  .

Banner-Design-Tutorial12

Banner-Design-Tutorial13

6. يك كادر ديگه با مشخصات بالا ايجاد ميكنم فقط به جاي آيكون پشتيباني از كره زمين استفاده ميكنم . در مرحله بعد هم مشخصاتي كه مد نظر هست را داخل كادر تايپ ميكنم

Banner-Design-Tutorial14

7. يك كادر با ابزار rectangle Tool با درصد رنگي a2d8ef ميكشم و بعد از آن فعاليت هاي انجمن را در آن تايپ ميكنم

Banner-Design-Tutorial15

Banner-Design-Tutorial16

8. در مرحله آخر از قسمت اول هم دو متن را در كادر مورد نظر تايپ ميكنم

Banner-Design-Tutorial17

شروع كار با پنل انيميشن

9. پنل انيميشن را از مسير Window = > Animation فعال كنيد تا كادر تنظيمات آن در پايين صفحه ظاهر شود .

Flash Banner ASARAYAN2

Flash Banner ASARAYAN3

10. در پايين صفحه كادر انيميشن را مشاهده مي كنيد . اين پنل تشكيل شده است از : قسمت فريم ها  / قسمت Forever و قسمت Playes Animation

Flash Banner ASARAYAN4

 

11. به اين مرحله خوب دقت داشته باشيد . خوب اگر دقت كرده باشيد ما 2 كادر داشتيم . يك كادر اول كه مربوط به بخش پشتيباني بود و ديگري كه يك كره زمين در كنار آن قرار داديم . كادر + آيكون + متن را با پايين نگاه داشتن كليد Ctrl انتخاب و هر 3 لايه را تبديل به يك لايه ميكنم  .

Banner-Design-Tutorial18

12. بسيار خوب حالا بايد كادر اول را مرحله به مرحله از كادر اصلي در جهت افقي خارج كنيم . زمانها را در تصوير زير مشخص كرده ام  . زمانيكه كادر اول به طرف وسط نزديك ميشه و در موقعيت قرار ميگيره كمي زمانش را بيشتر ميكنم  .حركت اول در 14 فريم تقسيم مي شود

Banner-Design-Tutorial19

13. در حركت دوم بايد كادري كه يك كره زمين در آن قرار داده ايم را از طرف بالا به وسط كادر منتقل و بعد از آن طي 10 مرحله كادر را محو كنيم . طي هر مرحله بايد از Opacity 10 درصد كم كنيم

آموزش فتوشاپ | فتوشاپيست حرفه اي

14. حالا كادر آبي رنگ را در 2 مرحله نمايان ميكنم . در مرحله اول Opacity را برابر با 50 و در مرحله دوم برابر با 100 قرار ميدهم  . بعد از اينكه كادر مورد نظر نمايان شد نوبت ميرسه به متني كه در اين قسمت قرار است نمايش داده شود . متن ها هم طي 5 مرحله نمايان مي شوند . طي هر مرحله 20 درصد به opactiy اضافه مي شود .

Banner-Design-Tutorial21

15. حالا بايد يك فريم جديد ايجاد و لايه هاي كلمات تايپ شده به همراه لايه آبي رنگ را غير فعال كنيم .

16. در مرحله آخر هم بايد ، 2 متني كه تايپ كرده ايم مرحله به مرحله يكي از بالا به طرف وسط و ديگري از طرف پايين به طرف وسط حركت داده شود  .

Banner-Design-Tutorial22

نكته » تمام فريم ها به غير از فريم هايي كه بر روي آن مكث انجام ميگيرد داراي زمان 0.03 و فريم هايي كه مي خواهيم كمي بيشر نمايش داده شود 0.08 مي باشد. 4 فريم اصلي هم داراي زمان 2.1 مي باشد

منبع: http://www.learning.asarayan.com/education/software-training/toturial-photoshop.html

Banner-Design-Tutorial-DEMO

تا كنون نظري ثبت نشده است
ارسال نظر آزاد است، اما اگر قبلا در رویا بلاگ ثبت نام کرده اید می توانید ابتدا وارد شوید.