psd-to-html

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

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

یه سند جدید با ابعاد ۱۲۰۰*۸۰۰ با زمینه سفید ایجاد کنید. سند رو به چهار قسمت عمودی تقسیم کنید و با ابزار ellipse tool یک بیضی بزرگ رسم کنید مثل شکل زیر سه قسمت از سند رو با بیضی پر کنید طوری که در قسمت چهارمی یه کمان مشکی تشکیل بشه

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

1

2

اسم لایه رو half circle بذارید و اون رو rasterize .کنید و استایل های زیر رو به این لایه اعمال کنید

3

 

4

 

5

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

6

برای اینکه تصویر از یکنواختی در بیاد یه پترن به تصویر اعمال می کنیم به این منظور یه سند ۱۶ در ۱۶ میسازیم ابزار zoom رو فعال می کنیم و تا اندازه ۳۲۰۰ سند جدبد رو بزرگنمایی می کنیم. ابزار pencil tool رو با سایز یک پیکسل و رنگ سیاه انتخاب میکنیم و تصویری شبیه تصویر زیر ایجاد می کنیم.

7

برای تبدیل این تصویر به پتترن به منوی edit میریم و گزینه define pattern رو انتخاب میکنیم سپس کلید ctrl  رو نگه میداریم و روی لایه ی half circle کلیک می کنیم تا به حالت انتخاب در بیاد

بعد از اینکه لایه به حالت انتخاب در اومد یه لایه جدید میسازیم و روی اون کلیک میکنیم تا لایه جدید هم به حالت انتخاب در بیاد.

ابزار paint bucket tool رو با زدن کلید G انتخاب میکنیم از تولبار گزینه foreground رو به pattern تغییر میدیم و پترنی رو که ساختیم انتخاب کرده و روی محل سلکت شده کلیک میکنیم تا پترن روی قسمت سیاه رنگ اعمال بشه

8

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

910

 

بعد از اعمال استایل باید شبیه تصویر زیر شه:

11

با زدن کلید U ابزار Rounded Rectangle Tool رو فراخوانی می کنیم، radius رو روی ۱۰ پیکسل تنظیم می کنیم (البته بصورت پیشفرض خودش روی ۱۰ تنظیم شده) دکمه Shift  رو نگاه میداریم و یه مربع ۱۳۰ در ۱۳۰ رسم می کنیم

12

اسم لایه رو days outer بذارین و استایل زیر رو اعمال کنید

13

 

14

 

15

 

تا حالا باید چیزی شبیه این تصویر شده باشه:

16

 

لایه days outer رو کپی کنید برای اینکار روی لایه ی مورد نظر کلیک راست کنید و گزینه duplicate layer رو انتخاب کنید تا کپی شه، اسم لایه رو days inner بذارید. روی لایه کپی شده کلیک راست کنید و delete layer style رو انتخاب کرده تا استایل اون پاک شه.

کلید های ترکیبی CTRL + T رو بزنید تا ترانسفرم فعال شه قصد داریم لایه daysinner رو کوچیک تر کنیم به شکلی که لایه ی days outer از زیرش مشخص باشه، برای اینکار shift و alt رو نگه دارین و شکل رو مقداری کوچیک کنید تا لایه ی زیری نمایان شه.

17

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

18

 

19

 

20

 

21

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

22

 

ابزار rectangular marquee Tool رو با زدن کلید m انتخاب کنید یه مستطیل به ارتفاع یک پیکسل رسم کنید (در واقع یه خط) طوری که لایه days رو به دو قسمت بالا و پایین تقسیم کنه. سلکت رو با رنگ مشکی پر کنید. یه خط دیگه هم رسم کنید ولی اینبار رنگ اش رو به ۲f2f2 تغییر بدین. این دو خط رو کنار هم قرار بدین تا حالت فرو رفتگی ایجاد بشه مثل شکل زیر.

23

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

24

در نهایت نوشته ها رو با رنگ ۵۴۵۴۵۴ به شکل اضافه کنید

25

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

26

تایمر رو که ساختیم حالا میریم سراغ نوار پروسس بار. Rounded Rectangle Tool  رو انتخاب می کنیم و یه مستطیل باریک و دراز رسم می کنیم.

 

27

 

استایل های زیر رو به لایه اضافه می کنیم

 

28

 

29

 

30

 

تا اینجا باید شبیه تصویر زیر شده باشه:

31

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

 

32

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

 

33

 

34

 

35

 

36

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

37

 

برای اینکه نوار از یکنواختی در بیاد یه پترن به اون اضافه میکنیم برای اینکار میتونین از پترن های آماده استفاده کنید ولی اینجا پترن رو خودمون میسازیم.

یه سند جدید با ابعاد ۲۵ در ۲۵ ایجاد کنید و با ابزار براش شکلی شبیه زیر رسم کنید و از منوی ادیت اون رو به پترن تبدیل کنین

38

 

مثل مراحل قبل پترن رو به نوار پیشرفت اضافه کنید و اپاسیتی اش رو به ۱۰ درصد کاهش بدین.

39

برای زیباتر شدن یه های لایت هم به نوار اضافه می کنیم بدین منظور rectangle rectangle رو انتخاب میکنیم و نصف بالایی نوار رو به حالت انتخاب در میاریم و با رنگ سفید رنگ اش می کنیم، اپاسیتی رو هم به ۸ درصد کاهش میدیم.

40

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

step41

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

 

 

پایان قسمت اول .

منبع : photoshop-plus

 

 

 

 

 

 

 

 

تعداد بازدیدها: ۷۲۹۸

۳۸ نظر

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

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

  3. سلام در مورد اموزش گام به گام می خواستم بگم تبلیغ به این چیزا گذاشتن تا خرج سایت بیرون بیاد تبلیغ داخل سایت بزاری تا اموزش پولی نکنی و چرا شماها منظور از شماها ینعی سایت های که میان اموزش رایگان میزارن و بعد اموزش پولی میکنی سایت های هستن تبلیغ میزارن و کار خودشون ادامه میدهند و پولی نیست اگه باشه من ندیدم سایت شما هم خیلی خوبه و خوانده زیادی هم داره یا میان

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

  4. سلام میشه ازتون یه خواهشی بکنم؟

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

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

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

    1. اگه طبق مدیریت محتوا میهن بلاگ کدنویسی بشه بله میشه
      ولی ما اینجا برای میهن بلاگ آموزشی نداریم و اگه آموزش کدنویسی رو بذارم براساس html ساده توضیح میدم.

  6. سلام مهندس
    خسته نباشی
    یه مدته فتوشاپم این مدلی شده ده بار ویندوز عوض کردم صدبار فتوشاپو نصب کردم بازم درس نمیشه
    http://8pic.ir/images/djtzlabhvx01cz68wi9u.png
    کانتینیو رو که میزنی مثلا نمیشه توش تایپ کرد
    یا با سایز دیگه که میسازی نمیشه از فیلترا اصتفاده کرد
    اگه میشه کمکم کنید
    با تشکر

  7. سلام احسان جان ممنون از آموزش خوبت.. اگه میشه آموزشه ویدیویی رو هم بزار چون واقعا کمک زیادی میکنه..
    یه سوال داشتم : من وبلاگ دارم ، میشه از این قالب برای وبلاگم استفاده کنم یا باید کدهاشو به بلاگفا تغییر بدم؟

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

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

یک پاسخ بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *