آموزش طراحی قالب سایت در فتوشاپ (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. شایان سلیمانی شایان سلیمانی 16 مرداد 1402

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

  2. طیبه جلوه گر طیبه جلوه گر 05 آذر 1401

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

  3. نام نام 05 اسفند 1400

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

    تشکر از شما

  4. برهان زنگنه برهان زنگنه 06 آذر 1400

    خیلی خیلی عالی بود
    هم دوره عالی بود👌
    هم طریقه دانلود عالی بود👌
    هم تدریس خودتون عالی بود👌 خسته نباشی خدا خیرت بده👏👏🌹🌷💐

  5. محمدامین محمدپور محمدامین محمدپور 03 آذر 1400

    خیلی مفید و عالی بود آقای موسوی

  6. نرگس خادمی نرگس خادمی 03 مرداد 1400

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

  7. پارسیان گرافیک پارسیان گرافیک 02 مرداد 1400

    عالی ومفید بود اما حیف که کد نویسی نداشت

  8. علی طاهری علی طاهری 15 تیر 1400

    مثل بقیه دوره های سایت...
    عالی!😍
    کاربردی!😎
    روان و...
    ممنون از سایت بسیار خوب یوکسیم و آقای مهران موسوی

  9. علیرضا وحدانی علیرضا وحدانی 19 فروردین 1400

    بسیار عالی و روان
    واقعا لذت بردم
    کارت حرف نداره مهران

  10. امین امین 01 بهمن 1399

    بسیار عالی بود لذت بردم😍لطفا بخش کد نویسی هم اضافه کنید 🙏

  11. محمد اخباری محمد اخباری 11 آبان 1399

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

  12. علی جکس علی جکس 17 اردیبهشت 1399

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

  13. سینا حکیم زاده سینا حکیم زاده 23 فروردین 1399

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

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

  14. رقیه مقدم رقیه مقدم 26 اسفند 1398

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • مدینه دهقان

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

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

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

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

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