6 روز تا پایان تخفیف ها

آموزش طراحی قالب سایت در فتوشاپ (1 پروژه رایگان) website template design in photoshop

ویدیوهای پیش نمایش : پیش نمایش

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

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

این دوره رایگان هست و تنها با ثبت نام در سایت می تونید مشاهده کنید.

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

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

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

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

آموزش طراحی گرافیک قالب سایت

دقت کنید که تو این دوره فقط گرافیک این قالب رو طراحی می کنیم و کدنویسی رو انجام نمیدیم.

در صورت بالا بودن تعداد درخواست برای آموزش کدنویسی این قالب، یک دوره جدا برای کدنویسی هم آماده می کنیم.

طراحی هدر قالب (Header)

آموزش طراحی هدر سایت

تو این ویدیو بخش بالای قالب که Header یا سربرگ گفته میشه رو طراحی می کنیم.

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

طراحی بخش درباره من قالب (About Me)

آموزش طراحی بخش درباره ما سایت

از بخش "درباره من" می تونید برای معرفی خودتون استفاده کنید.

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

طراحی بخش ویژگی های قالب (Features)

آموزش طراحی بخش ویژگی های سایت

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

این بخش دقیقاً پایین "درباره من" طراحی شده و با معرفی علایقتون می تونید با بخش قبلی مرتبط کنید.

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

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

طراحی گالری یا نمونه کار قالب (Gallery)

آموزش طراحی گالری نمونه کار سایت

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

بصورت گالری 8 تصویر آخر نمایش داده میشه و یک دکمه برای مشاهده تصاویر بیشتر قرار میدیم.

این قسمت حالت معمولی تصاویر رو بدون رنگ و محو طراحی می کنیم و حالت حرکت ماوس روی تصاویر (هاور - Hover) رو بصورت رنگی با Opacity بیشتر.

طراحی مطالب بلاگ قالب (Articles)

آموزش طراحی بلاگ سایت

اینجا سه مطلب آخر ارسال شده در قالب رو در صفحه اصلی به نمایش در میاریم.

این بخش که "خواندنی ها" نامگذاری شده، همون بلاگ هست!

یک تصویر، عنوان، متن و دکمه ای برای مطالعه کامل مطلب رو قرار میدیم.

طراحی خبرنامه قالب (Subscription)

طراحی خبرنامه

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

برای این قالب خبرنامه ای زیبا و جذاب رو طراحی خواهیم کرد.

طراحی تماس با ما قالب (Contact)

آموزش طراحی فرم تماس

فرم تماس با ما رو کمی فانتزی طراحی می کنیم. فرمی ساده با زمینه ای زیبا.

از فرم تماس برای ارتباط کاربر ها با مدیر سایت استفاده میشه.

طراحی فوتر قالب سایت (Footer)

آموزش طراحی فوتر

چون این یک وب سایت شخصی هست، یک فوتر (پابرگ) ساده رو طراحی می کنیم.

برای فوتر لوگو، متن کپی رایت و یک دکمه "رفتن به بالا" قرار میدیم.

فایل های دوره

پس از ثبت نام در دوره، فایل های مورد نیاز برای طراحی رو از همین صفحه دانلود کنید.

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

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

حق کپی رایت

در صورتی که قصد کدنویسی این قالب رو دارید و می خواید از همین طرح برای وب سایت خودتون استفاده کنید، لطفا در انتهای قالب (Footer) یک لینک به همین صفحه قرار بدین تا از رضایت کامل ما برخوردار شوید.

در این دوره یاد می گیرید :
  • طراحی گرافیک قالب سایت (1 طرح صفحه اصلی)
  • کار با پنل های مختلف فتوشاپ
  • کار با متن
  • کار با شکل ها
  • استفاده از تصاویر در قالب
  • کار با اسمارت آبجکت (Smart Object)
  • نکاتی در زمینه طراحی قالب سایت
  • نکاتی در زمینه رنگ بندی
  • کلید های میانبر کاربردی
پیش نیازها :
  • نرم افزار فتوشاپ (Adobe Photoshop)
  • آشنایی با نرم افزار فتوشاپ (آموزش فتوشاپ)

    جهت مشاهده ویدیوها روی عنوان درس ها کلیک کنید

    باز کردن / بستن تمام فصل ها 1 فصل
  • طراحی قالب سایت در فتوشاپ

    01:09:34
    • 1. معرفی دوره 02:30 (پیش نمایش)
    • 2. فایل های دوره 01:06 (پیش نمایش)
    • 3. طراحی بخش هدر (Header) 09:48 برای تماشای این ویدیو وارد حساب کاربری خود شوید
    • 4. طراحی بخش درباره من (About Me) 10:07 برای تماشای این ویدیو در دوره ثبت نام کنید
    • 5. طراحی بخش ویژگی ها (Features) 09:32 برای تماشای این ویدیو در دوره ثبت نام کنید
    • 6. طراحی بخش گالری/نمونه کار (Gallery) 07:48 برای تماشای این ویدیو در دوره ثبت نام کنید
    • 7. طراحی بخش مطالب بلاگ (Blog) 08:13 برای تماشای این ویدیو در دوره ثبت نام کنید
    • 8. طراحی بخش خبرنامه (Subscription) 04:31 برای تماشای این ویدیو در دوره ثبت نام کنید
    • 9. طراحی بخش تماس (Contact) 08:37 برای تماشای این ویدیو در دوره ثبت نام کنید
    • 10. طراحی بخش فوتر (Footer) 07:22 برای تماشای این ویدیو در دوره ثبت نام کنید
  1. رقیه مقدم رقیه مقدم 26 اسفند 1398

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

    یوکسیم :
    با تشکر از نقد شما
    در دوره "آموزش طراحی گرافیک سایت در فتوشاپ UI/UX" یوکسیم، قالب فروشگاهی آموزش داده شده.

  2. سید حسین عزیزی سید حسین عزیزی 21 بهمن 1398

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

  3. امیرحسین احمدی امیرحسین احمدی 16 بهمن 1398

    مثل دوره های قبل عالی بود منتظر دوره های پیشرفته هستیم

  4. زهرا جوهری زهرا جوهری 15 دی 1398

    سلام
    آموزش عالی، در عین سادگی اما نکات پرارزشی داشت.

    سپاس از زحمات.
    دوره پیشرفته هم لحاظ گردد.

  5. ایمان حاجی زاده ایمان حاجی زاده 15 آبان 1398

    آموزش عالی بود فقط نداشتن آموزش برنامه نویسیش خیلی به چشم میومد اگه آموزش برنامه نویسیش هم بذارین عالی میشه

  6. مبینا عباسی مبینا عباسی 26 مهر 1398

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

    یوکسیم :
    سلام. بسیار از نقد شما سپاس‌گزاریم.
    دوره طراحی قالب در حال آماده سازیه و بزودی منتشر میشه.

  7. میلاد میلاد 16 شهریور 1398

    با سلام بسیار عالی بود فقط لطفا کدنویسی این قالب هم اموزش بدین ممنون میشم

  8. سمانه قاسمی سمانه قاسمی 11 شهریور 1398

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

  9. امیر امیر 02 شهریور 1398

    باسلام. میخوام این دوره رو ببینم . مطمئنم که ان شاء الله مفید واقع میشه.
    باتشکر از زحمات شما. به امید برگزاری دوره های جدیدتر طراحی psd وب سایت.

  10. محمد محمدی محمد محمدی 29 مرداد 1398

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

  11. معصومه نعمتی معصومه نعمتی 17 مرداد 1398

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

  12. علی برکت علی برکت 10 مرداد 1398

    خوب بود و باکیفیت
    من تازه آشنایی پیدا کردم
    با آرزوی موفقیت

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

  • مدینه دهقان

    دوره ساخت ایکون رنگی

    1 پاسخ 7 ماه قبل
    • مدینه دهقان

      سلام خدمت شما ممنون از اموطش خوبتون
      ذر فایل ایکون ستاره دایره ایجاد کردید و گرادیانت دادید ولی از قبل سایه زیرش رو خودتون ایجاد کردید من متوجه نشدم چطور
      فقط برداشت کردم یک لایه جدید ایجاد رندر رگتنگل و گرادیانت سیاه و سفید ولی من تنظیماتت گرادیانت رو نمیدونم چطور ایجاد کردید اخه من هر کاری میکنم نمیشه

    • مهران موسوی مهران موسوی (7 ماه قبل)

      سلام
      لطفا سوالات خودتون رو در بخش "پرسش و پاسخ" دوره مربوطه ارسال بفرمایید.
      با این حال درباره سایه ای که برای آیکون ها در دوره "آموزش طراحی حرفه ای آیکون در 10 پروژه
      " طراحی شده هم این سایه رو در ویدیو "فایل های دوره" یعنی ویدیو شماره 3 همون دوره توضیح دادم چطور طراحی کنید.