• illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید میانگین رضایت دانشجویان سون لرن از دوره ها، بیش از 94% می باشد!

آموزش طراحی قالب از صفر - جلسه پنجم طراحی قالب در فتوشاپ

54365 ۱۳ تیر ۹۱

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

http://www.7learn.com/a/msm/webdesign/photoshop/0.png

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

1-  برای شروع کار یک فایل جدید در ابعاد 960 پیکسل (عرض)  و 900 پیکسل (ارتفاع) و 72dpi رزولوشن ایجاد کنید.

2-  با سطل رنگ (Paint Bucket) رنگ (#04283b) را بر روی صفحه بریزید.

3-  یک لایه جدید ایجاد کنید، قلم مو (Brush) را انتخاب کنید، سایز قلم را به اندازه ای زیاد کنید که بتوانید یک محیط روشن بزرگ با رنگ سفید (مانند نمای زیر) در وسط صفحه ایجاد کنید.

http://www.7learn.com/a/msm/webdesign/photoshop/1.jpg

4-  ترکیب لایه را به حالت (Soft Light) تغییر دهید.

http://www.7learn.com/a/msm/webdesign/photoshop/2.jpg

5-  حالا (Rectangle Tool) را انتخاب کنید و اشکالی را همانند نمای زیر در صفحه ایجاد کنید. من رنگ (#41738e) را برای کشیدن این اشکال انتخاب کردم.

http://www.7learn.com/a/msm/webdesign/photoshop/3.jpg

6-  در سمت چپ، من فضای خالی را با یک شکل دیگر به رنگ (#28607d) پر کردم.

http://www.7learn.com/a/msm/webdesign/photoshop/4.jpg

7-  سپس با رفتن به منوی Edit>Transform>Skew و انتخاب ابزار (Move Tool)، شکل خود را به حالت زیر تغییر دادم و گوشه ها را با دقت بالا به هم متصل کردم.

http://www.7learn.com/a/msm/webdesign/photoshop/5.jpg

8-  شما هم این کار را برای 4 گوشه کار به همین صورت تکرار کنید. حالا ما 2 نوار تقریبا سه بعدی در بالا و پایین صفحه داریم.

http://www.7learn.com/a/msm/webdesign/photoshop/6.jpg

9-  حالا باید یک کپی از این اشکال بگیریم و دقیقا به حالتی که در نمای زیر مشاهده میکنید با کمی فاصله در زیر اشکال اولیه و با رنگ تیره تر قرار دهیم، با این کار به صفحه خود عمق داده ایم. همین کار را برای نوار زیر صفحه تکرار کنید.

http://www.7learn.com/a/msm/webdesign/photoshop/7.jpg

10-  یک شکل به حالت بیضی با استفاده از (Ellipse Tool) در زیر نوار روشن بالای صفحه و با رنگ تیره ایجاد کنید.

http://www.7learn.com/a/msm/webdesign/photoshop/8.jpg

11-  به منوی (Filter) بروید و از زیرمنوی (Blur) گزینه (Gaussian Blur) را انتخاب کنید و تنظیمات آن را به روشی که در نمای زیر می بینید تغییر دهید.

http://www.7learn.com/a/msm/webdesign/photoshop/9.jpg

12-  و (Opacity) لایه را به 40% کاهش دهید.

http://www.7learn.com/a/msm/webdesign/photoshop/10.jpg

13-  مراحل 10 تا 12 را برای نوار پایینی تکرار کنید و یا از لایه ایجاد شده قبلی یک کپی بگیرید و آن را در زیر نوار پایینی صفحه قراردهید. اگر مراحل را درست انجام داده باشید، قالب شما تا ایجای کار شبیه به نمای زیر خواهد بود.

http://www.7learn.com/a/msm/webdesign/photoshop/11.jpg

14-  حالا یک لایه بالاتر از همه لایه ها ایجاد کنید (می توانید اینکار را با استفاده از CTRL+SHIFT+ALT+N) انجام دهید و با استفاده از مداد یا (Pencil Tool) یک خط صاف افقی بکشید، ولی اندازه قلم را روی 1px تنظیم کنید.

http://www.7learn.com/a/msm/webdesign/photoshop/12.jpg

15-  دقت کنید که خط سفید را مانند نمای زیر رسم کنید. هنگام کشیدن مداد (Pencil Tool) بر روی صفحه دکمه (Shift) را نگه دارید تا یک خط افقی صاف رسم شود. در نهایت خط رسم شده را مانند نمای زیر دقیقا بر روی لبه نوار بالا قرار دهید.

http://www.7learn.com/a/msm/webdesign/photoshop/khat.jpg

16-  حالا پاک کن (Eraser Tool) را مانند نمای زیر انتخاب کنید، دقت کنید که یک براش را در نرم ترین حالت قرار دهید.

http://www.7learn.com/a/msm/webdesign/photoshop/13.jpg

17-  حالا با استفاده از همین پاک کن قسمتهایی از خط را مانند نمای زیر پاک کنید.

http://www.7learn.com/a/msm/webdesign/photoshop/14.jpg

18-  در این مرحله با توجه به نیازها و سلیقه خود کمی متن به صفحه اضافه کنید.

19-  حالا شکلی همانند شماره یک عکس زیر در چپ کار خود ایجاد کنید.

20-  سپس به منوی Filter بروید و از زیرمنوی Blur گزینه Gaussian Blur را انتخاب کنید (Filter > Blur > Gaussian blur) و تنظیمات را مانند قبل بر لایه خود اعمال کنید. خروجی مانند شماره دو خواهد شد.

21-  با استفاده از ابزار انتخاب مستطیلی (Rectangular Marquee Tool) درست نیمه چپ شکل مورد نظر را انتخاب میکنیم.

22-  مطمئن باشید که لایه را درست انتخاب کرده اید، سپس دکمه های (CTRL+I) و بعد (CTRL+D) را بفشارید. با اینکار رنگ قسمت انتخاب شده را معکوس خواهید کرد و مانند شماره سه خواهد شد کارتون.

23-  حال اگر میزان شفافیت (Opacity) لایه را به 6% کاهش دهید نتیجه کار شماره 4 عکس زیر می شود.

http://www.7learn.com/a/msm/webdesign/photoshop/15.jpg

24-  حالا با استفاده از (Rounded Rectangle Tool) یک شکل ساده به این حالت می کشیم.

http://www.7learn.com/a/msm/webdesign/photoshop/16.jpg

25-  حالا با استفاده از دکمه های (CTRL+T) کمی شکل را به مانند نمای زیر می چرخانیم.

http://www.7learn.com/a/msm/webdesign/photoshop/17.jpg
26-  پس از اطمینان از اینکه شکل را در حالت مناسبی قرارداده اید دکمه Enter را بزنید، سپس بر روی لایه راست کلیک کرده و گزینه Rasterize Layer را انتخاب کنید.

http://www.7learn.com/a/msm/webdesign/photoshop/18.jpg

27-  باز هم با استفاده از (Rectangular Marquee Tool) قسمت سمت راست شکل فعلی را مانند نمای زیر انتخاب کنید.

http://www.7learn.com/a/msm/webdesign/photoshop/19.jpg

28-  حالا دکمه Delete را بزنید و یا از منوی Edit  گزینه Clear را انتخاب کنید، سپس برای خروج از حالت انتخاب دکمه های CTRL+D  را فشار دهید.

29-  مانند مراحل اولیه کار، از این لایه یک کپی بگیرید و رنگ آن را تیره تر کنید و آن را درست در زیر لایه فعلی، البته با کمی تغییر زاویه قرار دهید.

http://www.7learn.com/a/msm/webdesign/photoshop/20.jpg

30-  حالا کمی سلیقه به خرج داده و در سایت Wefunction.com  آیکون مورد نظر خود را پیدا کنید و آن را مانند نمای زیر در قسمتی از قالب جاسازی کنید.

http://www.7learn.com/a/msm/webdesign/photoshop/twitter.jpg

31-  خسته نباشید، قالب شما آماده است.

http://www.7learn.com/a/msm/webdesign/photoshop/demo.png

با تشکر از تمپ ها

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها 169 دیدگاه برای این مطلب ارسال شده است. نظردهی برای این مطلب بسته شده است .

  • ‏‏

    سلام به دوستان سون لرنی،
    دست همتون درد نکنه.
    برای تبدیل فایلهای PSD به HTML می تونید از این کتاب استفاده کنید:
    خودآموز طراحی وب به صورت عملی
    نویسنده: حامد تکمیل

    http://veyq.ir/book/id/13218/%D8%AF%D8%A7%D9%86%D9%84%D9%88%D8%AF-%DA%A9%D8%AA%D8%A7%D8%A8-%D8%AE%D9%88%D8%AF%D8%A2%D9%85%D9%88%D8%B2-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D9%88%D8%A8-%D8%A8%D9%87-%D8%B5%D9%88%D8%B1%D8%AA-%D8%B9%D9%85%D9%84%DB%8C

  • ‏‏
    برنامه نویس(۱۶ خرداد ۱۳۹۲)

    ممنون اموزش جالبی بود

  • ‏‏
    سینا خرسند(۳۱ خرداد ۱۳۹۲)

    سلام ممنون از بابت آموزش طراحی قالب سه بعدی تون واقعا به من کمک کردین.
    فقط من یک مشکل دارم چجوری این قالب سه بعدی مو sliceکنم
    طوری کهheaderو…ازهم جدا باشند
    ممنون میشم راهنمایی هاتونو برام ایمیل کنین

    ممنون ازسایت جامع تون

  • ‏‏
    babak khorsand(۲ تیر ۱۳۹۲)

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

  • ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

    :: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
    برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
    عضویت/ ورود سریع با :
    در حال اتصال ...

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram