شما اینجا هستید: خانه / افکت های تصویری / آموزش ساخت بنر vip ساده برای وبسایت ها در فتوشاپ { شماره ۱ }
آموزش ساخت بنر vip ساده برای وبسایت ها در فتوشاپ { شماره ۱ }

آموزش ساخت بنر vip ساده برای وبسایت ها در فتوشاپ { شماره ۱ }

خب شب دوستان بخیر ! دیگه نوبتی هم باشه نوبت به وبمستر های عزیز میرسه ! در آموزش که در پیش روتون هست که البته آموزش شماره ی ۱ هست و از ساده سادش شروع کردیم و انشاالله در صورت موافق بودن دوستان شماره های بعدی رو  حرفه ای تر رو قرار میدیم. البته این بنر gif نیست و ساده هست اما بخواید gif کنید از آموزش های قبلی استفاده کنید . تو هیچ وبسایتی چنین آموزش هایی پابلیک نمیشه معمولا ولی آی فتوشاپ یه جمع کاملا دوستان و موفق هست که هر چیزی رو بی ادعا به دوستان آموزش میده ! تعداد عکس های آموزش بیش از ۶۰ تا هست ولی بسیار ساده ساده و بسیار روان توضیح داده شده تا دوستانی هم که خیلی کم از فتوشاپ میدونند براحتی بتونند انجام بدند. خب بدون توضیحات بیشتر به سراغ آموزش میریم. با ما باشید

 

 

نکات : رو عکس هایی که نمیبینید زوم کنید .

 

خب بدون مقدمه بیشتر بریم …..

 

۱٫ سایزی که بنرتون رو میخواید قرار بدید رو انتخاب کنید ! ما نظرمون رو سایز بسیار پر کاربرد ۹۰۰ در ۳۰۰ بود ! پس فتوشاپ رو باز کنیم و ctrl+n رو بزنیم و اندازه هارو وارد کنیم.

0

۲٫ حالا به سراغ layer/new adjustment layer/ gradient بروید و مثل زیر عمل کنید یا مثل شکل زیر از زیر لایه ها اقدام کنید

1

۳٫ حالا به سراغ layer/new fill layer/ gradient بروید و مثل زیر عمل کنید

2

۴٫حالا ابزار rectangular marquee tool رو انتخاب کنید و با مثل شکل زیر ۲ طرف بنر رو سلکت کنید.

35

۵٫حالا در همون حالت کلید های ترکیبی ctrl+shift+n رو بزنید ! کادری ظاهر میشه ! اسمش رو فیلتر بذارید و اوکی کنید .

6

۶٫سپس در همین لایه و در همون حالت سلکت به سراغ edit/fill بروید و مثل زیر عمل کنید

7

۷٫ حالا به سراغ فیلتر filter/texture/ patchworl بروید و مثل زیر عمل کنید

{ ممکن است این فیلتر برای شما وجود نداشته باشد پس میبایستی  ctrl+k رو بزنید و به قسمت plug یا plugin بروید و تیک show all filter gallery رو بزنید }

8

۸٫حالا حالت لایه رو به سافت لاین و میزان کدری رو به ۱۰ درصد کاهش بدید

9

۹٫نتیجه مناسب

10

۱۰٫حالا ctrl رو از رو کیبرد نگه دارید و با موس یبار رو لایه  فیلتر { همین لایه } کلیک کنید تا مثل شکل زیر سلکت شه

11

۱۱٫حالا ctrl+shift+ i رو بزنید تا اینورس شه و دوبار shift+f5 رو بزنید  و اوکی کنید . حالا اینبار به سراغ filter/texture/ stained glas sبرید و مقدارو زیر رو وارد کنید.

1213

 

۱۲٫ نتیجه بسیار مناسب

14

۱۳٫حالا فونت زیر رو دانلود کنید و نصب کنید . سپس t رو از رو کیبرد بزنید تا فونت فعال بشه ! حالا از کادر بالاش تنظیماتو  مثل ما انجام بدید.

فونت age

سایز ۲۵۰

دانلود فونت age

15

 

 

۱۴٫ سپس V رو بنویسید.

16

۱۵٫ حالا ctrl+t رو بزنید و از بالای فتوشاپ زاویه رو -۱۵ درجه قرار بدید. نتیجه

17

18

۱۶٫ حالا یبار دیگه t رو بزنید از رو کیبرد

فونت : age

سایز : ۱۰۰

و i رو بنویسید و سپس ctrl+t رو بزنید و زاویه این یکی رو ۵ درجه بذارید .

19

۱۷٫ سپس اینبار حرف p رو بنویسید .

فونت همون

سایز ۱۵۰ و ۱۰ درجه

20

۱۸٫ حالا با move tool  { اولین ابزار } حروف رو جابه جا کنید و مثل شکل زیر درست کنید .

21

۱۹٫حالا با شیفت یا کنترل هر ۳ تا حرف رو با کلیک کردن روش سلکت کنید و سپس ctrl+e رو بزنید تا به یه لایه تبدیل بشند.

22

۲۰٫وقتی که به یه لایه تبدیل شدند روش کلیک راست کنید و blending option رو بزنید و مثل زیر عمل کنید

23 24 25 26

 

۲۱٫نتیجه قابل قبول

27

۲۲٫حالا یه لایه جدید ایجاد کنید  با ctrl+shift+n   و اسمشم قیمت ها بذارید.

28

۲۳٫حالا rectangular رو یبار دیگه انتخاب کنید و ۳ تا مستطیل ایجاد کنید . تنظیمات بالا رو حتما انجام بدید بخصوص اون قرمز هایی که براتون مشخص کردم

29

۲۴٫ حالا هر بار که کلیک کنید یه مستطیل با یه اندازه مشخص میده و بزرگتر کوچیکتر نمیشه ! مثل شکل زیر عمل کنید ۴ تا مستطیل { میتونی کمتر یا بیشتر بر اساس نیازت }

{ اگه احیانا برای بعضی از دوستان مستطیل اولی رو کشیدند و وقتی خواستند دومی رو ایجاد کنند اولی ناپدید میشه کافیه کنترل و یا شیفت رو بگیرند }

30

۲۵٫ حالا edit/fill برید و سپس از قسمت use برید رو color و در کادر ظاهر کد رنگ زیر رو وارد کنید و اوکی کنید.

 

31

 

۲۶٫ حالا ctrl+t رو بزنید و -۸ درجه زاویه بدید بهش ! نتیجه

32

۲۷٫ حالا حالت لایه رو و میزان کدری رو مثل زیر تغییر بدید

33

۲۸٫حالا یبار دیگه t رو از رو کیبرد بزنید و مثل ما تنظیمات رو انجام بدید.

حالا قیمت ها رو دونه دونه بنویسید. مثلا اولی ۱۵۰۰ تومان ! بعدش که نوشتید ctrl+t رو بزنید و -۸ درجه زوایه بهش بدید.

34

3637

35

حالا همین کارو واسه ۳ تا قیمت بعدی انجام بدید. یعنی یبار t رو بزنید ۳۰۰۰ تومان و ۸ درجه زاویه ! دوباره یبار دیگه t رو بزنید و مثل قبلیا ! ما ۴ تا قیمت رو نوشتیم

38

 

حالا با move tool که با زدن v فعال میشه قیمت هارو داخل کادر مستطیل ها اوردیم.

39

۲۹٫حالا با کنترل لایه های قیمت رو سلکت کنید با کلیک کردن روشون و سپس ctrl+e رو بزنید تا یکی بشند. بعد رو لایه اش کلیک راست کنید و blending option رو بزنید  و مثل ز یرعمل کنید.

40

41 42 43

۳۰٫حالا قیمت ها رو یادتون چه مراحلی رو انجا م دادیم واسشون !

حالا t رو یبار دیگه بزنید   با تنظیمات زیر  و سپس  اسم ما ه ها رو هم بنویسید. { مثل قیمت ها یعنی یبار t رو بزنیم بنویسیم یک ماهه و با trl+t  اون رو -۸ درجه زاویه بدیم و بعد دوباره تی رو بزنیم و بعدی تا سرانجام مثل شکل زیر بشه }

اسم فونت : far.alphabet

44

45

۳۱٫  حالا لایه های ماه ها رو با کنترل سلکت کنید و با ctrl+e یکی کنید. بعد که یکی شد بر روی لایه اش کلیک راست کنید و blending option رو بزنید و مثل زیر عمل کنید .

46

47 48

۳۲٫ حالا شعار سایتتون رو بنویسید. چطوری؟ یبار t رو بزنید و نصف شعر رو بنویسید بعدیه زاویه دلخواه بدید بعد دوباره ادامه شعار رو در یه لایه دیگه

53

۳۳٫ ما هر کلمه رو با زاویه ای دلخواه دراوردیم و با move tool اون ها رو مثل شکل زیر در آوردیم.

54

۳۴٫حالا لایه ها ش رو مثل بالایی ها یکی کنید و رو لایه اش کلیک راست کنید وقتی یه لایه شد و blending option رو بزنید و مثل زیر

55 56 57

۳۵٫ حالا اینبار اسم سایتتون رو بنویسید. چطوری ؟ هر کلمه رو یبار جدا بنویسید و یه زاویه دلخواه با ctrl+t بهش بدید و بعدشم اون هارو در کنار هم به شکل جالبی بچینید .

58

۳۶٫حالا همه لایه های  کلمه های سایت  رو یکی کنید  و وقتی یکی شد روش کلیک راست کنید و blending option و مثل زیر عمل کنید

 

 

59

60 61 62 63

۳۷٫ نتیجه

64

۳۸٫ حالا برای اینکه کمی با کیفیت تر به نظر برسه برید به قسمت layer/new adjustment layer/ channel mixer و مثل زیر

65

۳۹٫ نتیجه نهایی

66

آی فتوشاپ رو میخوایم وی آی پی کنیم :D  خخخخخخ

امیدوارم خوشتون اومده باشه ! شماره بعدی حرفه ایش هست

راه های ارتباط با مدیر وبسایت سعید : iphotoshop.ir@gmail.com

راه های ارتباط با بنده :

iphotoshop_hossein@yahoo.com

d4rknes3@gmail.com

f—–b/hossein.tori

ما بریم  پروژه درسی رو کامل کنیم  :|

در پناه حق

 

درباره ی нσѕѕєιη.тσяι

نام ::̤̈م̤̤̈̈ح̤̤̈̈م̤̤̈̈د̤̤̈̈ ̤̤̈̈ح̤̤̈̈س̤̤̈̈ی̤̤̈̈ن̤̤̈̈ ̤̤̈̈ب̤̤̈̈ه̤̤̈̈ر̤̤̈̈ا̤̤̈̈م̤̤̈̈ی̤̤̈̈ ̤̈: متولد : مهر 13ᆨᆯ (اکتبر 1993) شغل : ~د͜͝ا͜͝ن͜͝ش͜͝ج͜͝و͜͝ی͜͝ ͜͝ک͜͝ا͜͝ر͜͝ش͜͝ن͜͝ا͜͝س͜͝ی͜͝ ͜͝~ [̲̲̅̅س̲̲̅̅ا̲̲̅̅خ̲̲̅̅ت̲̲̅̅ ̲̲̅̅و̲̲̅̅ ̲̲̅̅ت̲̲̅̅و̲̲̅̅ل̲̲̅̅ی̲̲̅̅د̲̲̅̅] علایق : ʜAᴄKɪNɢ ᴄEʟLᴘHᴏNᴇ ﹗ ɢRᴀPʜIᴄ ﹗ ᴍUsIᴄ ﹠ ᴍOᴠIᴇ ﹗ ɢOᴅ ̲͠м̲͠A̲͠ĸ̲͠E̲ ̲͠B̲͠e̲͠L̲͠ι̲͠V̲͠e̲ راه های ارتباط با بنده : iphotoshop_hossein@yahoo.com FB/Hossein.Tori gmail: d4rknes3@gmail.com ̶̲͠т̶̲͠W̶̲͠ι̶̲͠T̶̲͠т̶̲͠E̶̲͠r̶̲ ̶̲͠/̶̲ ̶̲͠v̶̲͠I̶̲͠в̶̲͠E̶̲͠r̶̲ ̶̲͠/̶̲ ̶̲͠l̶̲͠I̶̲͠ɴ̶̲͠E̶̲ ̶̲͠/̶̲

۵۴ دیدگاه

  1. سلام خسته نباشید داداش من خیلی از کارات خوشم اومده عزیز
    یه سال ابن بنر متحرکه دیگه درسته؟؟؟

  2. و سوال اخر
    چجوری میشه یه کاری کرد که وقتی روی بنر کلیک میکنند برو به همون ادرس سایت و این کدی که گفتین توی قسمت کد های ویرایش قالب بزارم با….
    مرسی

    • مرس از حمید خان بابت توضیحش ! بله همونطور که گفتند برای قرار دادن عکس داخل سایت مثلا لوگوی سایت رو میخوای جایگزینش کنی ! اول میای رو همون سایتت رو لوگو کلیک راست میکنی و view page info رو میزنی . در قسمت location میتونی ادرس لوگوی فعلی رو ببینی ! بعد میری تو ادیت html و ctrl+F رو میزنی و آدرس رو وارد میکنی تا سریع پیدا کنه ! بعد عکستون رو در هاست شخصی یا در آپولود سنتر مطمئن آپولود میکنید و جایگزین url اون قبلی میکنید .

      حالا مثلا میخواید عکس بذارید روش کلیک کنید بره صفحه دیگه از کد زیر استفاده کنید

      http://up.khoone.org/up/1/v9i1un3vt43bn7fnxksi.jpg

      در قسمت image/gif آدرس url عکس رو و در قسمت a href=url باید مسیر رو که میخواید بهش بدید رو بذارید .
      ضمن اینکه این سوال هارو باید در انجمن های برنامه نویسی یا وبلاگ بپرسید ولی دیگه ……..
      آپدیت سایت هم همونطور که حمید خان گفتند شاید به فاصله هر چند روز بذاریم ولی میانگین همون ۱ ۲ در میاد.

  3. پس چجوری میزاریتش درون سایت؟؟؟؟؟
    و یک سوال دیگه شما هر چند روز یک بار سایت رو آپدیت میکنید؟؟؟
    مرسی

    • با اجازه ی حسین جان
      ببنید سجاد جان شما ماشاالله سایت داری بعد بلد نیستی بزاری تو سایت؟ برای گذاشتن درون سایت باید براش کد تعریف کنید اونم به زبونِ آدمی زاد که میشه اچ تی امل این هم سورس
      <img src="آدرس تصویر"

      و سوال دومتون باید بگم هر یک یا دو روز یکبار سایت آپ میشه بازم سوالی بود در خدمت شمام

  4. میشه بگید چجوری این بنر تبدیل به کد HTML کنیم؟؟؟
    مرسییییییییییییی
    سایت عالیییییییییییییی
    دارینننننننننننن

  5. تشکر تشکر تشکر

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

  6. سلام
    بازم اومدم
    من این اموزش رو موبه مو انجام دادم با کمی تغیرات حالا یه چیزی شده
    ببین قابل قبول هست یا نه؟
    http://nanofile.ir/do.php?imgf=1371584407451.jpg
    راستی
    طریقه ساخت لوگو را هم اموزش بده
    و اموزش تغیر رنگ پوست رو هم اضافه کن

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

  8. سلام
    دستتون درد نکنه عالی بود
    این کار منه!
    http://upcity.ir/images2/51512151939400510169.jpg

  9. سلام.
    خیلی ممنون از سایت خوبتون./
    اگر میشه گرافیکش رو ببرید بالاتر و .gif اش هم بکنید.

  10. سلام

    مرسی واقعا سایت فوق العاده دارید و آموزش های عالی

    اما خیلی از کاربرا درخواست آموزش هدر سایت رو دارن ب صورت حرفه ای اگه میشه و زحمتی نیست آموزش ساخت هدر سایت رو هم بذارید

    بازم تشکر از زحمات شما

  11. اقا اینجا مدیر سایت کیه ؟
    من میخوام از افکت پازل تو فوتوشاپ استفاده کنم اما نیتونم .. .میشه راهنماییم کنید !؟
    دانلودافکت پازل رو هم قرار بدین … ممنون میشم !

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

    • مرسی رها خانم ! چشم سعی میکنیم بیشتر مطلب بذاریم ولی همین الانشم در کشور ایران اولین هستیم در آموزش یعنی شما تعداد آموزش ها رو نگاه کنید میبیند که مشابه حتی سایت های برتر خارجی و بهتر داریم پیش میریم ولی به دلیل تبلیغات کمتر فعلا به اون اوجی که میخوایم نرسیدیم.

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

    موفق باشید…

  14. ممنون
    ولی من نسخه فتوشاپ کامل ام خیلی قدیمیه.. برا همین اصلا با ظاهرش نمیتونم کار کنم.. اصلا مث اون چیزایی ک هشما میگید نیست.
    ولی امیدوارم مشکل حل بشه چون کاملا با اون چیزی که شما میگید یا خودم میخام متفاوت در میاد

  15. اره میدونم.. خودمم گیج شدم..
    من حتی به یه طراح حرفه ای هم گفتم موضوع رو ولی ایشون هم متوجه نشد.
    جالب اینجاست که من هرچیزی که بخوام درست کنم این قسمت فقط تا ۱۵۰ اجازه افزایش میده.. بیشتر که عدد بزنم اون ارور رو میده..
    درضمن من با فتوشاپ پرتابل کار میکنم… ممکنه بخاطر اون باشه؟؟؟

    • ممکنه ولی نمیشه با اطمینان گفت شاید یک مشکل خیلی ساده ای باشه ! ولی در مجموع خیلی از دوستان که به ما پیام میدند به خاطر همین فتوشاپ پرتال خیلی به مشکلی بر میخورند ! مثلا قفل شدن براش ها و هنگ کردن و …..از این قبیل ! اگه از نسخه کامل استفاده کنید فکر نمیکنم همچین مشکلاتی پیش بیاد! حالا باز بنده در فروم آدوبی هم که سرچ میکنم چیز خاصی نیست ! اگه مشکل رو پیدا کردیم که قرار میدیم.

    • پریا خانوم بنده تا حالا با همچین مشکلی برنخورده بودم ! اگه همه مراحل رو درست برید و تیک هارو درست زده باشید نباید این رور رو بده ولی بازم بنده سرچ میکنم ببینم مشکل از چیه !

  16. ببخشید من از پیغام ارور عکس گرفتم.. اینم لینک عکسش :

    http://uploadtak.com/images/c9973_20130512_224224.jpg

  17. سلام
    ببخشید. توی مرحله ۳ برای من پیغام ارور میده و scale فقط تا ۱۵۰ تغییر میکنه.. بیشتر نمیشه

  18. سلام توی اون قسمت ۴ آموزش چجوری دو قسمت تصویر رو با هم سلکت کنیم ؟؟؟

  19. خسته نباشید
    اگه میشه یه سری فونت فانتزی وکاربردی که بنظرتون خوبن تو سایتتون قرار بدید

  20. این دیگه خیلی کاربردی بود برا من….برا هدر سایت،بازم بذارید..ممنون
    امکانش هست،آخرهرآموزش ،نسخه pdf هم گذاشته شه؟؟؟

  21. salam.

    bebakhshid y soal dashtam . man photoshop cs6 daram. in amozeshia k gozashtid

    aya ba un ham mishe?

    ya mokhtase y photoshope khassEe? age loft konid begid mamnon misham

    chon man alaghe daram mikham yad begirim baraye ayande.Tnx

  22. مرسییییییییییییییییییییی
    میشه یه آموزش برا طراحی هیدر برای وبسایت بزارین؟؟؟؟

  23. من ساخت پوستر سینمایی میخواااااااااااااااااااام=))=))
    یه سوالم داشتم منبع این اموزشا کجاست؟

دیدگاهتان را بنویسید

بپر بالا !