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

هشت قدم تا : طراحی قالب سایت شخصی درفتوشاپ (۲)

1
امتیاز دهید

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

با عرض سلام خدمت دوستان عزیزم

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

بخش اول این آموزش که همین مطلب پیش رو هست٬ مربوط به طراحی قالب در فتوشاپ هست و قسمت بعدی تبدیل این قالب به HTML  و CSS و در نهایت کدینگ این قالب برای جوملا هست

امیدوارم بتونم آموزش خوبی رو برای دوستان قرار بدم…

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

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

بریم سراغ آموزش…

به دلیل تعداد بالای عکس ها و همچنین حجمی که عکس ها دارند، لطفاض تا لود شدن تمامی عکس ها صبر کنید

خب کما فی السابق قدم قدم میریم جلو ببینیم چند قدم میشه

قدم اول :

مثل همیشه نیت کنید!!! :دی

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

و یک فایل جدید باز کنید (CTRL + N )

مطابق شکل زیر اندازه رو ۱۰۲۰ * ۱۳۰۰ قرار بدهید

psd1

 

قدم دوم:

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

مستطیل بالایی :  انداز ۱۰۲۰*۳۷۰    کد رنگ : #۴۷۴b4c

مستطیل وسطی : اندازه ۱۰۲۰ * ۶۷۹   کد رنگ : #۲e2e2e

مستطیل پایینی :  اندازه  ۱۰۲۰*۲۵۱    کد رنگ : #e6e6e6

psd2

 

قدم سوم:

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

در سمت راست میخواهیم یک منو درست کنیم.

برای این کار از  Rounded Rectangle استفاده می کنیم (می تونید برای آشنایی و نحوه ی استفاده به آموزش های قبلی مراجعه کنید) به اندازه ی دلخواه می کشیم و البته قبلش radius  رو روی ۱۵px قرار می دهیم. البته من اینجا از اندازه ی ۶۲۷*۸۴ استفاده کردم . حالا می خواهیم کمی به این شکل افکت بدهیم. کافیست روی لایه راست کلیک کرده و گزینه ی Blending ..  را انتخاب کنید و مطابق شکل زیر عمل نماییید

psd3

و همچنین یک افکت دیگر مانند شکل زیر

psd5

 

و سپس بوسیله ی Type چند تا منو براش درست می کنیم و می نویسیم.

قدم چهارم :

حالا می خواهیم یک بک گراند برای منویی که انتخاب میشه درست کنیم. کافیست به اندازه ی دلخواه و تا حدی که بک گراند منو معلوم باشه به وسیله ی Rounded Rectangle یک شکل بکشیم و افکت زیر را اعمال نماییم :

psd6

 

در نهایت باید یه چیزی مثل شکل زیر داشته باشید

 

آموزش ساخت سایت در فتوشاپ - سایت شخصی

 

 قدم پنجم :

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

حالا یک مستطیل در ابعاد ۹۴۷*۳۹۵ بکشید. من این مستطیل رو به زیر منو آوردم و دقیقاً با آخرین خط منو تراز کردم. مانند شکل زیر

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

 

حالا یک سری افکت به این مستطیل می دهیم

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

 

لطفاً به تنظیمات و کد رنگ ها دقت کنید

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

اینم افکت آخر

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

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

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

 

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

پیشنهاد می کنیم بخوانید  سئوالات متداول (FAQ) چیست؟

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

اسلاید شو در فتوشاپ 1

 

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

Filter>Blur>Gaussian Blur و رادیوس را برابر ۱۰ می گذاریم. مانند شکل زیر

اسلاید شو در فتوشاپ 2

اسلاید شو در فتوشاپ 3

و حالا سه تا دایره ی کوچولو!!!! در زیر آن می کشیم. ترجیحتاً رنگ اولیرو با بقیه متفاوت در نظر می گیریم و سه عدد را نیز درون انها می نویسیم

مطابق شکل زیر

اسلایدر در فتوشاپ

 

حالا برای سمت راست اسلاید شو میخواهیم توضیح متن و دکمه ی ادامه مطلب رو قرار بدهیم . البته قبلش یه چند خطی نوشتم…

رادیوس این دکمه رو ۳۰ قرار دادم

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

 

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

 

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

 

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

حالا روی این دکمه کلمه ی ادامه مطلب یا Read More… رو می نویسیم و یک دایره جلوی ان می کشیم با کد رنگ # ۳۱۳۱۳۹  و در نهایت توسط ابزار  Pen Tool  یک فلش به سمت جلو می کشیم (آموزش کار با این ابزار رو قبلاً یاد داده بودم)

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

البته من در نهایت به این نتیجه رسیدم تا در اینترنت یک سرچی کنم و از یک دکمه ی بهتر استفاده کنم

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

 

قدم ششم : قسمت وسطی

در این قسمت ما دوباره یک مستطیل می کشیم در ابعاد ۹۴۷*۵۱۴ و این مستطیل را با فاصله ی اندکی از اسلایدر قرار می دهیم . و کمی به ان افکت می دهیم

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

 

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

حالا در این قسمت چند آیکون به همراه یک سری نوشته قرار می دهیم و می نویسیم.

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

 

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

دو خط توسط ابزار  Line Tool ترسیم می کنیم

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

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

کد رنگ سمت چپ : #۰۰۰۰۰۰

کد رنگ سمت راست : #۳a3a3a

 

توسط ابزار Ellipse یک بیضی بزرگ پایین این بخش می کشیم و افکت می دهیم

توسط ابزار  نصف آن را انتخاب و پاک (Delete) می کنیم , و برای اینکه از حالت انتخاب خارج کنیم CTRL + D را میزنیم

Filter>Blur>Gaussian Blur و رادیوس را معادل ۷px قرار می دهیم

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

 

حال توسط ابزار Line Tool یک خط بالای ان می کشیم که پهنای آن ۸۵۲ پیکسل و ارتفاع آن ۱ پیکسل است و ترجیحاً توسط ابزار eraser دو طرف را تقریباً پاک میکنیم!!! یعنی هایلایت می کنیم  :دی

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

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

 

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

 

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

 

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

 

قدم هفتم : قسمت فوتر

برای این قسمت شما می تونید تنها یک متن کپی رایت به همراه چند آیکون وب (مثل تاییدیه CSS و Validate و ..) قرار دهید و یا مثل بنده چند آیکون و یا …

خیلی قدم سختی بود!!!

قدم هشتم:

در این قدم کار رو به مشتری نشون میدید و میگید همین که هست!!! در آموزش بعدی تبدیل این قالب به HTML  رو یاد میدم

 

 

موفق باشید

مرتضی پورمحمد

 

 

 

 

 

 

 

1 نظر
  1. نازمحمد می گوید

    با سلام ‘ آموزشی که ارایه نمودید عالی بود

ارسال یک پاسخ

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