تماس با ما

موبایل: 2565 038 0912

دفتر تهران: 2565 2842 021

دفتر گرگان: 2565 3233 017


اهداف این جلسه

  1. پیاده سازی سربرگ طراحی شده در فتوشاپ

نیازمندی های این جلسه

  1. سیستم گرید ۹۶۰ برای فتوشاپ (دانلود)

بعد از دریافت سیستم گرید ۹۶۰ و خارج کردن از حالت فشرده، ۳ فایل مشاهده خواهید کرد که ما در اینجا از فایل ۱۶ ستونی استفاده خواهیم کرد.

 

 

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

 

 

هر کدام از این خطوط صورتی رنگ یک گرید (Grid) محسوب میشوند و از آنجا که ما از سیستم ۱۶ ستونی استفاده میکنیم، هر گرید (هر خط صورتی) عرضی معادل ۴۰ پیکسل دارد و از هر طرف ۱۰ پیکسل حاشیه خواهد داشت.

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

در فتوشاپ، یک گروه جدید ایجاد کنید و نام آن را سربرگ قرار بدهید:

 

 

 

فراموش نکنید برای هر عنصری که طراحی میکنید یک لایه جدید در نظر بگیرید!

برای طراحی بخش سربرگ، ابزار Rounded Rectangle Tool را انتخاب کنید و از نوار ابزار گزینه مقدار Radius را برابر ۱۰px تنظیم کنید:

 

 

 

 

و رنگ را بر روی ۰۰۰۰۳۳ تنظیم کنید. لایه جدیدی در گروه سربرگ ایجاد کنید و سپس در بخش بالایی صفحه یک مستطیل به صورت زیر بکشید: (بعد از ایجاد مستطیل با استفاده از کشیدن و رها کردن، آن را کمی بالا ببرید تا لبه های گرد بالایی دیده نشوند)

طراحی قالب سایت 2

توجه کنید که لایه این مستطیل را انتخاب کرده باشید (در پالت لایه ها، این لایه هایلایت داشته باشه) و از مسیر منو Edit>Transform Path گزینه ی Warp را انتخاب کرده و در نوار ابزار، نوع Warp را بر روی Arc lower و میزان Bend را بر روی ۶- قرار بدهید:

طراحی قالب سایت 2

 

برای اینکه بتوانید تصاویر و تنظیمات را در اندازه واقعی ببینید، میتوانید بر روی تصاویر کلیک کنید! پهنای این بخش معادل ۹۴۰ پیکسل (کل فضای گرید) و ارتفاع آن چیزی در حدود ۷۰ پیکسل است ( اندازه ارتفاع به سلیقه شما میتواند متفاوت باشد )

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

سپس از منوی Filter>Noise مقدار add noise را انتخاب کنید و تنظیمات زیر را اعمال نمایید:

 

 

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

طراحی قالب سایت 2

 

در ادامه به طراحی عنوان و توضیحات سایت می پردازیم.

تا اینجای کار منوی بالایی قالب را آماده کردیم و حالا نوبت اضافه کردن سایر قسمتهای سربرگ میرسد. سایر قسمتها میتوانند شامل لوگو، عنوان سایت یا وبلاگ، توضیحات سایت یا وبلاگ، فرم جستجو و … باشند.

یک لایه جدید ایجاد کنید و نام این لایه را header bg بگذارید. دوباره ابزار Rounded Rectangle tool را انتخاب کنید و یک مستطیل بزرگتر برای زمینه کل سربرگ با رنگ سفید رسم کنید .دقت کنید تمام اجزا باید درون سیستم گرید باشند ( یعنی حداکثر ۹۴۰ پیکسل عرض داشته باشند ولی ارتفاع آنها بنا به سلیقه شما قابل تغییر است، در طرح زیر اندازه ارتفاع مستطیل سفید حدود ۲۳۰ پیکسل است ) :

 

 

میزان شفافیت یا Opacity این لایه (header bg) را از ۱۰۰% به ۳۰% تغییر بدهید:

 

 

سپس بر روی گزینه Add layer style کلیک کنید (در تصویر بالا با عدد ۲ مشخص شده است) و تنظیمات زیر را برای گزینه ی Stroke اعمال کنید:

 

 

با اضافه کردن عنوان و توضیحات سایت انتظار داریم چیزی شبیه تصویر زیر را ایجاد کرده باشید:

 

 

فایل را با نام MyTheme ذخیره یا Save کنید چرا که در درسهای آینده به این فایل نیاز داریم.

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

 


سفارش طراحی سایت

سفارش طراحی سایت

google
yahoo
alexa
ebook
Baidu.com
Wikipedia
Blogger.com
Windows Live
Amazon.com
eBay
Bing
Ask
استانداری گلستان
f shdj, sefaresh, sefaresh .net, sefaresh.net, sthva, sthva nhj kj, sthva.kj, stthva.kj, xvhpd, آیفون, استفاده, اندروید, اپل, اپلیکیشن, اینترنت, باتری, بازار, خواهد, دستگاه, دوربین, سامسونگ, سفارش, سفارش دات نت, سفارش دات نت sefaresh.net, سفارش.نت, سیستم, طراح وب, طراحي وب سايت, طراحی, طراحی وب سایت, فناوری, مایکروسافت, موبایل, هوشمند, کاربران, کمپانی, گلکسی, گوشی, گوشی هوشمند, گوگل

نمایش تمامی تگ ها
بسته ویژه مدارس مدارس
بسته ویژه پزشکان پزشکان
بسته ویژه مهندسین مهندسین