تک تودِی
فناوری های روز را با ما دنبال کنید

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

2
امتیاز دهید

Edu-Design-web-photoshop[www.faedu.ir]

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

متن + آموزش تصویری ( فیلم )

نمایش نمونه کار اجرا شده در فیلم
نمایش نمونه کار اجرا شده در فیلم
نمایش نمونه کار اجرا شده ی کامل
نمایش نمونه کار اجرا شده ی کامل

حالا بریم سراغ آموزش متنی :

برای شروع فتو شاپ رو باز کنید.

مرحله اول :

یک فایل با ابعاد ۱۰۲۰*۱۳۵۰ مطابق شکل ایجاد می نماییم.

رنگ بک گراند رو بر روی #۰۱۹۳a9 قرار می دهیم.

قدم دوم:

از گزینه ی Ellipse یک دایره ( بیضی ) سفید رنگ بر روی صفحه ترسیم می کنیم.

بالای صفحه قرار می دهیم . از منوی Filter > Blur > Gaussian Blur را انتخاب و عدد مورد نظر را بر روی ۴۳PX تنظیم می کنیم.. مطابق شکل:

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

برای اینکه این لایه شفاف باشه از منوی بغل که لایه ها در آن قرار دارند ، گزینه ی Soft Light رو انتخاب می کنیم.

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

در نهایت نتیجه مانند شکل زیر می شود :

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

WebDesign

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

قدم چهارم :

حد فاصل هد و فوتر را با خط تعیین می کنیم. یعنی : از گزینه ی Ellipse d یک Line را در صفحه ترسیم می کنیم با مشخصات زیر

خط بالایی دارای کد رنگ : #۰۴b1be

خط پایینی دارای کد رنگ : #۰۲cbd9

طراحی وب با فتوشاپ

حال به وسیله ی پاک کن ( که Flow رو بر روی ۱% قرار دادیم ) سعی می کنیم از گوشه های خطوط پاک کنیم به نحوی که از محو به سمت کامل شدن پیش بریم:

طراحی وب با فتوشاپ

قدم پنجم:

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

طراحی سایت با فتوشاپ

طراحی سایت با فتوشاپ

طراحی سایت با فتوشاپ

در آخر هم میتونید متن منو هاتون رو بهش اضافه کنید

طراحی سایت در فتوشاپ

قدم ششم :

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

از گزینه مستطیل یک Rounded Rectangle tools انتخاب و با radiuse 10 درون شکل ترسیم میکنیم. (البته در عکس اشتباهاً بر روی ۱۰ تنظیم کرده بودم )

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

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

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

حالا شکل جدید را به روی شکل قدیمی می آوریم به نحوی که فقط نصف آن بر روی شکل قدیم باشد و توسط گزینه ی Pen Tools نقاطی را که هنوز بک گراند دارد و ناقص است را رنگ می دهیم ( یه جور ماست مالی کردنه  :دی )

پیشنهاد می کنیم بخوانید  افزودن گزینه Open With Command Prompt به منوی راست کلیک فولدرها

طراحی سایت با فتوشاپ

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

طراحی سایت در فتوشاپ

طراحی سایت در فتوشاپ

خوب حالا چند تا از نمونه کارهامون رو به این کار اضافه کنیم…

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

به همین راحتی

قدم هفتم:

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

“We work for you so you don’t have too!”

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

طراحی سایت در فتوشاپ

نمونه کار طراحی سایت در فتوشاپ

نمونه کار طراحی سایت در فتوشاپ

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

طراحی سایت در فتوشاپ

خوب حالا توی قدم بعدی می خواهیم به عنوان مثال آخرین کار ها رو نمایش بدیم

قدم هشتم :

یک مستطیل در زیر هدر و شعار ترسیم می کنیم. به طوری که بتوان دو مستطیل هم اندازه ی دیگر هم در همان ردیف ترسیم کرد…

طراحی سایت با فتوشاپ

حال یک سایه هم برایش طراحی می کنیم تا از این حالت خشکی دربیاید…

از منوی PenTools مطابق شکل یک مثلث ترسیم می کنیم و در سمت راست و پایین همین مستطیل قرار می دهیم :

طراحی سایت با فتوشاپ

حال برای اینکه بهتر به نظر آید باید آن را کمی محو کنیم. از منوی Filter> Blur> Gaussian Blur را نتخاب و گزینه مورد نظر را برروی ۸PX قرار می دهیم.

همین کار را بر روی قسمت سمت چپ عکس نیز انجام می دهیم

طراحی سایت با فتوشاپ

حال همین کار را ( کل قدم هشتم ) پنج بار دیگر انجام می دهیم و در کنار یکدیگر مطابق شکل زیر قرار می دهیم و گوشه ای از آخرین کارهایی که انجام دادیم را بر روی آنها قرار می دهیم:

طراحی سایت در فتوشاپ

طراحی سایت در فتوشاپ

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

قدم نهم :

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

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

قدم دهم:

تبدیل فایل فتوشاپ به اچ تی ام ال …. در آینده ی نزدیک توضح می دهم

در آخر هم توضح بدم که دارم روی یک سایت به نام TempIran کار می کنم تا کارهامو برای دانلود رد اون قرار بدم….

دانلود فایل PSD نمونه کار اجرا شده در فیلم

دانلود فایل PSD نمونه کار کامل

دانلود فیلم با حجم ۱۲۰ مگابایت

2 نظرات
  1. mojtaba می گوید

    باسلام
    چه مطالب جالبی دارید.
    و چه سایت زیبایی دارید من خیلی خوش حال میشم که اسم سایتت
    توسایت منم باشه.
    لطفا از سایت ما دیدن کنید.
    مارو با نام {برترین مرجع دانلود}لینک کنید
    بعد با پیام مارو متلع کنید.
    آدرس ما
    http://www.FalahDL.Gigfa.com
    بیا پشیمون نمیشی.منتظرم
    مارو بی نصیب نکنید

    1. farjadp می گوید

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

پاسخ به mojtaba
لغو پاسخ

آدرس ایمیل شما منتشر نخواهد شد.