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

در این آموزش چگونگی طراحی یک سایت مناسب برای شرکت های طراحی وب سایت را قدم به قدم در فتوشاپ آموزش خواهم داد. در این سایت اصول طراحی وب سایت های کاربرپسند در نهایت سادگی و زیبایی همراه با رنگ های متنوع پیاده سازی شده است. لایه بندی صحیح، چیدمان کاربردی عناصر صفحه و همچنین دسترسی آسان به بخش های مختلف سایت از مهمترین موارد در طراحی صفحات وب و از ویژگی های این وب سایت می باشند. با یادگیری تکنیک های این آموزش می توانید قالب سایت مورد نیاز خود را در فتوشاپ پیاده سازی کرده و یا با اندکی تغییر در این قالب آن را برای موضوع وب سایت خود سفارشی کنید.

نتیجه نهایی

نتیجه نهایی این پروژه به صورت زیر می باشد که می توانید پروژه کامل شده را فرمت PSD به مبلغ £2.50 از سایت HV-Designs خریداری کنید.

Step42

ایجاد سند فتوشاپ و تنظیمات اولیه

فتوشاپ را باز کرده و یک سند جدید با سایز 1200x1055 پیکسل و پس زمینه سفید ایجاد میکنیم.

Step1

پس از اینکه سند را ایجاد کردیم، نیاز به دو خط راهنما در صفحه داریم تا برخی اندازه گیری ها را توسط آنها انجام دهمی. برای اینکار به منوی View رفته و گزینه New guide را انتخاب میکنیم. سپس مقادیر زیر را برای تنظیمات آن وارد میکنیم :

Step2

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

Step3

اکنون ابزار گرادینت را انتخاب کرده و نوع گرادینت را به صورت خطی یعنی حالت Liner gradient قرار می دهیم. سپس د�� پالت ر��گ�� کد رنگ زمینه جلویی را برابر با #e6f7ff و کد رنگ پس زمینه را برابر با #ffffff قرار میدهیم. اکنون ماوس را روی تصویر برده، دکمه ماوس را پایین نگه داشته و با کشیدن ماوس از بالا تا وسط صفحه گرادینت را ایجاد میکنیم :

Step4

ساخت عنوان وب سایت

ابزار متن را انتخاب کرده و نام فونت را Verdana، سایز آن را 30pt و رنگ فونت را برابر با کد #92a6a6 قرار میدهیم. عنوان سایت خود را در بالای صفحه تایپ می کنیم :

Step5

پس از اینکه عنوان سایت را تایپ کردید، با دوبار کلیک بر روی لایه متنی آن، پنجره Layer Style را باز کرده و استایل های زیر را بر روی آن اعمال میکنیم:

Step6

Step7

اکنون تصویر وب سایت ما باید به صورت زیر باشد:

Step8

ساخت بخش جستجو

ابزار ترسیم مستطیل با گوشه های گرد را انتخاب کرده و مقدار Radius را برابر با 10 پیکسل قرار می دهیم :

Step9

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

Step10

پس از رسم مستطیل با گوشه های گرد برای جعبه جستجو، استایل های نشان داده شده در تصاویر زیر را بر روی آن اعمال میکنیم:

Step11

Step12

اکنون باید جعبه جستجوی ما به صورت زیر باشد :

Step13

برای ساخت یک دکمه سه بعدی به عنوان دکمه جستجو، ابزار ترسیم مستطیل با گوشه های گرد را انتخاب کرده و یک مستطیل با میزان Radius برابر با 10 پیکسل و سایز 80x50 پیکسل رسم میکنیم:

Step14

با استفاده از ابزار ترسیم مستطیل معمولی، یک مستطیل روی نیمه بالایی مستطیل قبلی رسم می کنیم به طوریکه به انداره ای که در تصویر مشاهده می کنید، مستطیل جدید از مستطیل گوشه گرد بزرگتر باشد. سپس این دو لایه را با هم ادغام (merge) می کنیم تا تبدیل به یک لایه شوند :

Step15

پس از اینکه دو لایه فوق یکی شدند با استفاده از کلید های Ctrl+j از آن یک کپی می گیریم. لایه کپی شده را با انتخاب منوی Edit، زیر منوی Transform و انتخاب گزینه Rotate 180 به میزان 180 درجه می چرخانیم. در پایان هر دو لایه را کاملا" هم سطح و در کنار یکدیگر قرار می دهیم:

Step16

ابزار ”انتخاب“ مستطیلی شکل را انتخاب می کنیم و نیمه پایین لایه کپی شده را انتخاب کرده و کلید Delete را از صفحه کلید میزنیم تا بخش پایینی این لایه بریده شود :

Step17

شکل بریده شده را با کلیک روی دکمه های جهت نمای روی صفحه کلید، به شکل سمت چپ می چسبانیم به طوریکه هیچ همپوشانی ایجاد نشود اما هر دو لایه کاملا" بهم چسبیده باشد. سپس در پالت لایه ها در حالی که کلید Ctrl را پایین نگه داشته ایم، روی لایه کپی و بریده شده با ماوس کلیک میکنیم تا اطراف این لایه به حالت انتخاب درآید :

Step18

اکنون لایه اصلی را از پالت لایه ها انتخاب کرده و دکمه Delete را میزنیم تا لبه اضافی آن بریده شود. اعمال فوق را برای سمت دیگر لایه اصلی تکرار می کنیم تا شکل زیر حاصل شود:

Step19

اکنون بر روی این لایه استایل های زیر را اعمال میکنیم:

Step20

Step21

پس از اعمال استایل های فوق، لایه به وجود آمده را به اندازه مناسب تغییر سایز داده و آن را روی فیلد جستجوی ساخته شده در مرحله قبل قرار می دهیم :

Step22

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

Step23

ساخت منو

ابزار ترسیم مستطیل با گوشه های گرد را انتخاب کرده و یک مستطیل بزرگ با سایز 850x250 پیکسل با پس زمینه سفید ترسیم میکنیم. سپس توسط پنجره استایل در بخش Stroke یک حاشیه با ضخامت 1 پیکسل و رنگ #cfeaea ایجاد میکنیم :

Step24

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

Step25

ساخت هدر رنگی

توسط ابزار ترسیم مستطیل گوشه گرد، یک مستطیل با میزان Radius برابر با 5 پیکسل داخل مستطیل بزرگ رسم می کنیم. داخل این مستطیل جدید را با یک رنگ دلخواه پر می کنیم:

Step26

اکنون یک گرادینت با مشخصات زیر بر روی این مستطیل جدید اعمال می کنیم :

Step27

اکنون باید مستطیل مانند تصویر زیر باشد :

Step28

در حالی که دکمه Ctrl روی صفحه کلید را پایین نگه داشته ایم روی لایه مستطیل رنگی در پالت لایه ها کلیک میکنیم تا اطراف آن به حالت انتخاب درآید. سپس یک لایه جدید ایجاد کرده و از منوی Filter زیر منوی Render و سپس گزینه Clouds را انتخاب میکنیم :

Step29

سپس به منوی Filter رفته و در زیر منوی Artistic گزینه Underpainting را کلیک کرده و تنظیمات زیر را اعمال میکنیم :

Step30

اکنون به مجددا به منوی Filter رفته و از زیر منوی Blur گزینه Motion Blur را انتخاب میکنیم. در مدت اعمال این فیلتر اطمینان پیدا کنید که مستطیل همواره در حالت انتخاب باشد در غیر اینصورت فیلتر motion Blur مستطیل رنگی را کنار زده و بر روی مستطیل بزرگتر اعمال خواهد شد که ما قصد انجام اینکار را نداریم.

Step31

در پایان میزان شفافیت را با تنظیم Opacity به 50% کاهش داده و گزینه Blending mode را از بالای پالت لایه ها بر روی vivid light تنظیم میکنیم. اکنون تصویر ما باید به شکل زیر باشد:

Step32

اکنون می توانید متن دلخواه خود را بر روی این مستطیل رنگی درج کنید. شما می توانید مانند تصویر زیر از استایل Outer glow با تنظیمات پیش فرض استفاده کنید. در پایان با استفاده از ابزار pen افکت درخشندگی را بر روی مستطیل رنگی اعمال میکنیم :

Step33

ساخت جعبه خدمات

ابزار ترسیم مستطیل با گوشه گرد را انتخاب کرده و پس از اینکه Radius را برابر با 10 پیکسل قرار دادیم، سه مستطیل هم اندازه را در یک ردیف کنار یکدیگر طوری رسم میکنیم که مجموع عرض آنها برابر با 850 پیکسل شده و در بین آنها نیز یک فضای خالی وجود داشته باشد:

Step34

مستطیل را با یک رنگ دلخواه پر کرده و استایلی با مشخصات زیر بر روی آن اعمال میکنیم :

Step35

Step36

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

Step37

پس از تکمیل سرآیند از یک پاراگراف برای شرح مختصری از بخش مورد نظر استفاده میکنیم. بعد از پاراگراف لیستی از موارد قابل ذکر به همراه آیکون تیک که در بسته آیکون 128 تایی موجود است، آورده شده است. این بخش با قرار دادن یک دکمه ��رای توضیحات بیشتر که توسط ابزار رسم مستططیل گوشه گرد ساخته می شود، به پایان می رسد :

Step38

ساخت بخش محتوای اصلی صفحه

بار دیگر مستطیل بزرگی با گوشه های گرد شده با Radius معادل 10 پیکسل و عر�� 850 پیکسل رسم میکنیم. مستطیل را با رنگ #e7f7ff پر کرده و یک حاشیه به ضخامت 1 پیکسل با رنگ #d5f0fc برای آن ایجاد میکنیم :

Step39

یک آیکون خانه کوچک که در پک آیکون 128 تایی موجود است را در بخش سمت چپ بالا قرار داده و متن خوش آمد گویی را در کنار آن درج میکنیم. در پایان متن انتخابی خود را در این قسمت قرار میدهیم :

Step40

ساخت بخش پایین سایت

آموزش را با ساخت بخش فوتر سایت به پایان می رسانیم. یک مستطیل سفید رنگ توسط ابزار رسم مستطیل گوشه گرد رسم کرده و یک حاشیه به ضخامت 1 پیکسل به رنگ #d5f0fc برای آن ایجاد میکنیم. اکنون می توانید لینک هایی را که می خواهید در پایین سایت باشند و همچنین اطلاعات مربوط به کپی و حریم قانونی وب سایت را در این بخش درج کنید :

Step41

نتیجه نهایی

نتیجه نهایی این پروژه به صورت زیر می باشد که می توانید پروژه کامل شده را فرمت PSD به مبلغ £2.50 از سایت HV-Designs خریداری کنید.

Step42

یادداشت پایانی

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

نظرات (28) -

  • حمید

    05/14/1390 04:11:38 ق.ظ | پاسخ به این نظر

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

    • Admin

      05/14/1390 05:57:49 ق.ظ | پاسخ به این نظر

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

  • محسن

    08/30/1390 01:36:14 ب.ظ | پاسخ به این نظر

    سلام.

    انصافاً مطالب خوبی در مورد طراحی وبسایت دارید.

    البته من فعلا نگاه گذار کردم و حتماض کامل مطالعه میکنم...

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

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

    • Admin

      08/30/1390 02:06:54 ب.ظ | پاسخ به این نظر

      سلام

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

  • مسلم

    09/21/1390 01:30:10 ب.ظ | پاسخ به این نظر

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

  • raha

    09/26/1390 10:31:57 ق.ظ | پاسخ به این نظر

    ممنون از سایت خوبتون لطفا آموزش های موجود را به صورت فایلهای pdfداخل سایت قرار بدید تا برای دانلود مشکلی نداشته باشیم در ضمن آموزش سایت ها در فتوشاپ را باتنوع بیشتری از انتخاب سایتها و جزئیات کاربردی و کاملتری قرار بدید .

  • amin

    09/26/1390 11:33:13 ق.ظ | پاسخ به این نظر

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

  • ایرج

    10/02/1390 01:45:21 ب.ظ | پاسخ به این نظر

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

  • sara

    10/30/1390 11:02:26 ق.ظ | پاسخ به این نظر

    سلام آموزش ها خیلی علی هست ممنون میشم اگه php  هم آموزش بدید

    • Admin

      10/30/1390 11:06:10 ب.ظ | پاسخ به این نظر

      سلام سارا خانم
      من تو Net. تخصص دارم اما بزودی بخشی در زمینه طراحی قالب و کلا طراحی CMSهای ساخته شده با php در سایت قرار خواهم داد و در این زمینه هم مطلب خواهم نوشت.
      مرسی

  • علی

    11/01/1390 03:11:01 ب.ظ | پاسخ به این نظر

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

    • Admin

      11/01/1390 07:36:57 ب.ظ | پاسخ به این نظر

      از نظر لطفت ممنونم و در مورد آموزش تبدیل psd به html هم حق با شماست، خیلی ها خواستار این آموزش هستن. اما من یه مقدار این روزها مشغلم زیاد شده و حتما میدونی که گذاشتن همچین آموزش های طولانی چقدر زمانبر و انرژی بر هست. اما حتما اگر فرصتی فراهم بشه یه آموزش درست و حسابی در این زمینه که فرمودید می زارم.

  • Arman66

    12/11/1390 02:11:48 ق.ظ | پاسخ به این نظر

    با سلام و خسته نباشید

    بابت تمام مطالب  (واقعا مفیدتون) سپاسگزارم

  • هاترااا

    12/22/1390 08:09:47 ب.ظ | پاسخ به این نظر

    واقعا سايت بسيار عالي داريييييين
    دستتون بابت تمام مطالب خوب و مفيدتون درد نكنه
    من هميشه دعاتون مي كنم
    فقط يه مشكلي هست ..اونم اينه كه كاش فايل هاي اموزش به صورت pdf بذارين كه ديگه واقعا عالي ميشه..

  • يونس

    03/03/1391 03:53:52 ق.ظ | پاسخ به این نظر

    معدود كساني هستند كه دانش و حاصل وقت ها تلاششان را در اختيار ديگران
    قرار مي دهند. باعث افتخار هستيد.

  • رضا

    06/10/1391 05:32:29 ب.ظ | پاسخ به این نظر

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

  • samira

    12/09/1391 10:38:41 ق.ظ | پاسخ به این نظر

    منکه هیچی بلدنیستم چیکارکنم؟؟؟؟؟؟؟ توروخدابهم یادبدین طراحی سایتو

  • مظاهر

    03/29/1392 01:28:38 ب.ظ | پاسخ به این نظر

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

  • مهدی

    04/30/1393 07:31:01 ب.ظ | پاسخ به این نظر

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

  • ماهان

    05/13/1393 09:45:06 ق.ظ | پاسخ به این نظر

    عكس هاي آموزش نمايش داده نميشه. ممنونم كه بفكر بقيه هستيد.

  • حسام

    05/27/1393 03:05:31 ق.ظ | پاسخ به این نظر

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

  • بابک

    08/30/1393 10:11:10 ب.ظ | پاسخ به این نظر

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

Loading