تدریس وب
جستجو در سایت
گروه مقاله : مقالات و انتشارات
تاريخ انتشار : 1396/03/13 - 17:00
كد :321

آموزش فتوشاپ قالب سایت گرافیکی

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

آموزش فتوشاپ قالب سایت گرافیکی

 

آموزش فتوشاپ قالب سایت گرافیکی

نتیجه نهایی

در پایان این آموزش به تصویر زیر خواهیم رسید:

 

آموزش فتوشاپ قالب سایت گرافیکی

 

ایجاد یک سند جدید

برای اینجاد یک تصویر گرافیکی اول باید یک سند جدید باز کنیم کلید CTRL+Nرا بزنید و ابعداد را مانند تصویر زیر وارد کنید . آموزش کامل ایجاد فایل را در  آموزش فتوشاپ پایه ایجاد یک فایل جدیدمطالعه فرمائید:

آموزش فتوشاپ قالب سایت گرافیکی

 

واحد ها و خط کش خود را تنظیم کنید

برای اینکه مطمئن باشید خط کش و خطوط خود را روی پیکسل های مناسب ایجاد می کنید کلید Ctrl+Kرا زده و روی قسمت Units & Rulersکلیک کنید و تنظیمات را مانند تصویر زیر قرار دهید:

آموزش فتوشاپ قالب سایت گرافیکی

 

خطوط راهنما را برای مناطق محتوا روی صفحه قرار دهید

دستور View > Rulersرا اجرا کرده و کلید Ctrl+Rرا بزنید . کلید F8را بزنید . کلید Mرا زده و با ابزار رسم ناحیه انتخاب مستطیل یک مربع 120 پیکسل در سمت چپ بوم رسم کنید همانطور که میبینید پنجره infoمشخصات دقیق ناحیه انتخابی را به شما خواهد داد:

آموزش فتوشاپ قالب سایت گرافیکی

 

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

آموزش فتوشاپ قالب سایت گرافیکی

 

لوگو را طراحی کنید

در این بخش یک لوگوی ساده طراحی خواهیم کرد ابتدا Layer > New > Groupرا اجرا کرده و نام پوشه را Logoقرار دهید.

ابزار تایپ را برداشته و واژه SMASHINGرا تایپ کنید. تمام حرف نام سایت باید بزرگ باشند . حالا در پنل کاراکتر ،فونت را روی Arial(از فونت های پیشفرض ویندوز ) و استایل نوشتار را روی Boldقرار دهید و سایز حروف را 42ptبگذارید در آپشن ابزار تایپ متد anti-aliasing= sharpو رنگ را برابر #101112قرار دهید

آموزش فتوشاپ قالب سایت گرافیکی

 

استایل لایه Gradient Overlayرا انتخاب کرده و تنظیمات را مانند تصویر انجام دهید:

آموزش فتوشاپ قالب سایت گرافیکی

 

عبارت SMASHINGرا به فاصله 35 پیکسل از بالا و صفر پیکسل از سمت چپ قرار دهید برای جابجایی از ابزار Move Toolبا کلید میانبر Vاستفاده کنید. این لایه را کپی کنید ما از کلید میانبر Ctrl+Jاستفاده می کنیم. و آنرا به سمت راست عبارت SMASHINGبرده و آنرا به Dzineتغییر دهید به این لایه گرادیانت #b27625تا #e5ad27بدهید .

ابزار تایپ را انتخاب کرده و تنظیمات زیر را انجام دهید:

آموزش فتوشاپ قالب سایت گرافیکی

 

برای اینکه بتوانید خطوط راهنما را ظاهر و مخفی کنید Ctrl+;را بزنید تصویر شما در حال حاضر باید شبیه تصویر زیر باشد . ما یک خط متن هم به تصویر اضافه کرده ایم.

آموزش فتوشاپ قالب سایت گرافیکی

 

ایجاد منوی سایت

یک پوشه ایجاد و نام آنرا navigationبگذارید . این پوشه باید بالاتر از پوشه لوگو باشد . خطوط راهنما را به این قسمت اضافه کنید. از بالا به فاصله 150 پیکسل از لبه یک خط و سپس با ابزار انتخاب مستطیل یک مستطیل به ارتفاع 4 پیکسل ایجاد کنید و آنرا با رنگ #e3ab27پر کنید.

برای ایجاد منو ها آنها را 12 پیکسل بالاتر از این خط ایجاد کنید و از خط راهنمای سمت چپ هم 20 پیکسل فاصله ایجاد کنید. برای اینکه گوشه های گرد ایجاد کرده باشید از ابزار Rounded Rectangleاستفاده کنید و هر دکمه از منو را در ابعاد 720×35 ایجاد کنید این لایه را در زیر لایه لینک عبارات قرار دهید همانطور که در تصویر نهایی دیدید پایین دکمه های منو فاقد انحنا است برای از بین بردن این انحنا از ابزار  Convert Point Toolاستفاده کنید. روی لایه hoverکلیک کرده و به آن استایل لایه گرادانت بدهید #e5ad27تا #b27625حالا عبارت Homeرا با رنگ سفید تایپ کنید

آموزش فتوشاپ قالب سایت گرافیکی

 

call us:

در این جا ما قصدنداریم نحوه دانلود ایکون را آموزش دهیم یک ایکون گوشی دانلود کنید و آنرا به صفحه خود اضاف کنید. این ایکون را در کنار خط راهنمای سمت راست صفحه قرار داده ایم و با ابزار تایپ شماره موبایل خود را اضافه نموده ایم ، ما از فونت Arialsبا ضخامت 20 پوینت و رنگ 292929# استفاده کرده ایم . در زیر شما ره تلفن اطلاعات وابسته به تماس با ما را با فونت 11 و رنگ #595959قرار داده ایم.

آموزش فتوشاپ قالب سایت گرافیکی

 

ایجاد هدر سایت

حالا ما میخواهیم قسمت هدر سایت را ایجاد کنیم یک پوشه در پنل لایه ها به نام headerایجاد کنید.

ابزار رسم مستطیل را با کلید میانبر Uفرا بخوانید . و یک مستطیل با ابعاد 440×1200 ایجاد کنید. این مربع را در فاصله 1 پیکسل از نوار منو قرار دهید نام لایه دارای این مربع را به header bgتغییر دهید روی این لایه دبل کلیک کرده و استایل Gradient Overlayرا انتخاب کنید. و رنگ ها را از #2e2226تا #7a7556قرار دهید. مکان این مستطیل باید شبیه شکل زیر باشد:

 

آموزش فتوشاپ قالب سایت گرافیکی

یک بار دیگر کلید Uرا بزنید و اینبار با ابعاد 360×960 یک مستطیل در فاصله 40 پیکسل از بالای لایه header bgرسم کنید. این مستطیل به خط راهنمای سمت چپ چسبیده است . نام این لایه را header containerبگذارید. در شکل زیر نحوه دیزاین این قسمت را خواهید دید.

آموزش فتوشاپ قالب سایت گرافیکی

ایجاد قسمت featured project(پروژهای برجسته)

برای ایجاد این قسمت یک پوشه جدید در داخل پوشه headerبه نام fpایجاد کنید. کلید Uرا زده .  و مستطیلی با ابعاد 340×630 در فاصله 10 پیکسل از بالا و سمت چپ header containerقرار دهید رنگ آن را مشکی و نام آنرا fp containerبگذارید.

آموزش فتوشاپ قالب سایت گرافیکی

تصویری که برای هدر سایت آماده کرده اید را باز کنید و آنرا به داخل سند خود ببرید. نام لایه آن را fp imageبگذارید و مکان آنرا بالای fp containerتعیین کنید روی عکس لایه  fp containerکلید Ctrlو کلیک  را زده  و روی لایه fp imageکلیک کنید و روی ایکون ماسک لایه کلیک کنید. یا میتوانید این دو لایه را کلیپ ماسک کنید. حالا عکس را با لایه های دیگر میزان کنید تا به نمای زیر برسید.تهیه و تنظیم توسط صفحه آموزش فتوشاپ  با ما در تماس باشید.

آموزش فتوشاپ قالب سایت گرافیکی

 

دستور Edit > Transform > Scaleرا اجرا کنید. و در نوار آپشن rotation=-4  قرار دهید. دوبار کلید اینتر را بزنید و در همان لایه fp imageبمانید و نوع ترکیبی آن را به Luminosity تغییر دهید.

آموزش فتوشاپ قالب سایت گرافیکی

 

بعد به سراغ ایجاد عنوان و توضیحات خواهیم رفت یکبار دیگر کلید Uار زده و یک مستطیل 90×630 پیکسل ایجاد کنید. از رنگ #161718برای آن استفاده کنید. و opacity=90%قرار دهید و عنوان آن را title bgبگذارید. این مستطیل را مانند تصویر زیر قرار دهید

آموزش فتوشاپ قالب سایت گرافیکی

 

یک مستطیل دیگر به ابعاد 1×630 پیکسل ایجاد کنید و رنگ آن را #9c9c9cبگذارید و نام این لایه را به title horizontal lineتغییر داده مستطیل را در لبه بالای محتوای لایه title bgقرار دهید.

حالا باید قسمت عنوان و توضیحات را اضافه کنیم از این تنظیمات استفاده کنید:

برای عنوان :

font: Arial, color: #ffffff, size: 25pt ,method = anti-aliasing

برای توضیحات :

font: Arial, color: #a4a4a4, size: 12pt and anti-aliasing method option: None

آموزش فتوشاپ قالب سایت گرافیکی

 

ایجاد قسمت quick quote

یک پوشه دیگر در داخل پوشه headerایجاد کنید و نام آن را quick quoteبگذارید یکبار دیگر کلید Uرا بزنید و یک مستطیل ایجاد کنید که ابعاد 340×300 داشته باشد این مستطیل را در فاصله 10 پیکسل از سمت راست قرار دهید و نام آن را  qq containerانتخاب کنید.

استایل لایه را از لایه hoverبه این لایه کپی کنید:

آموزش فتوشاپ قالب سایت گرافیکی

 

 

ابزار تایپ را انتخاب کنید و عبارت Quick Quoteرا داخل qq containerتایپ کنید. و آن را در فاصله 20 پیکسل از گوشه بالا سمت چپ گوشه جعبه  containingقرار دهید . فونت خود را روی Trebuchet MSقرار دهید .و رنگ نوشته را سفید و آپشن آن را روی anti-aliasing method=Sharpقرار دهید ما به ابزار رسم مستطیل گوشه گرد نیاز داریم با کلید میانبر Shift+Uاین ابزار را انتخاب کنید. و radius=3pxقرار دهید. سپس دو مستطیل گوشه گرد به ابعاد 260px× 35pxبا رنگ سفید ایجاد کند این لایه ها را field1و field2بنامید سومین مستطیل گوشه گرد را با سایز 260px× 75pxبا استفاده از رنگ سفید آن را گر کنید و نامش را field3بگذارید . با ابزار تایپ لیبل های این کادر ها را وارد کنید.

آموزش فتوشاپ قالب سایت گرافیکی

با ابزار مستطیل گوشه گرد یک مستطیل 35×80 پیکسل به نامsubmit btnایجاد کنید.

به این لایه یک استایل Gradient Overlayبا مشخصال زیر بدهید :

آموزش فتوشاپ قالب سایت گرافیکی

با ابزار تایپ عبارت Submitرا با فونت Arialو استایل Bold و سایز 13pt.تایپ کنید. هر دو لایه را در پنل لایه ها submit btn" and "Submit textانتخاب کنید.

با ابزار جابجایی آنها را بطور عمودی بچینید و یا دستور Layer > Align > Vertical Centers and Layer > Align > Horizontal Centersرا اجرا کنید:

آموزش فتوشاپ قالب سایت گرافیکی

 

ایجاد محوطه ورود متن اصلی

یک پوشه جدید به نام contentایجاد کنید با  ابزار رسم مستطیل Shift+Uیک مستطیل به ابعاد 175×300 پیکسل ایجاد کرده و نام آن را به c01تغییر دهید. جای این لایه را در 30 پیکسل در زیر header  و چسبیده به خط راهنمای سمت چپ ایجاد کنید. استایل لایه این قسمت را بصورت تصویر زیر بدهید

آموزش فتوشاپ قالب سایت گرافیکی

 

ما به این جعبه محتوا میتوانیم محتوا اضافه کنیم ابزار تایپ را انتخاب کرده و عبارت About SmashingDzineرا تایپ کنید . عبارت  Aboutرا با ابزار تایپ انتخاب کنید و رنگ آن را #b47825بگذارید.رنگ عبارت Smashingرا #2f2f2fو سپس یک توضیح به این قسمت اضافه کنید.

آموزش فتوشاپ قالب سایت گرافیکی

 

برای عنوان:

فونت :Trebuchet MS، استایل: Normal، اندازه قلم :24pt، anti-aliasing method: Sharp

برای توضیحات :

Font: Arial, style: Normal, size: 12pt, anti-aliasing method: None, color: #767676

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

Font: Arial, style: Bold, size: 13pt, anti-aliasing method: None, color: #252525, Underline

ما در این مرحله یک مربع در کنار توضیحات نیاز داریم. ابزار رسم مستطیل را با کلید Shift+Uانتخاب کنید . و رنگ آن را سفید قرار دهید با کمک کلید Shiftیک مربع کامل 88×88 پیکسل رسم کنید. این مربع را به فاصله 10 پیکسلی از سمت چپ مستطیل c01ببرید . نام این لایه را Borderبگزارید روی لایه استایل Strokeرا با مشخصات زیر اعمال کنید:

آموزش فتوشاپ قالب سایت گرافیکی

 

یک جعبه دیگر با سایز 82×82 رسم و آن را در مرکز مربع Borderقررا دهید ، نام این لایه را Boxبگذارید و نام مربع را #d5d5d5تمام لایه ها را در این گروه contentانتخاب کنید. و دستور Layer > New > Groupرا اجرا کنید نام این پوشه جدید را aboutبگذارید.

آموزش فتوشاپ قالب سایت گرافیکی

 

نکته : در داخل مربع طوسی جای یک عکس است و شما میتوانید در فتوشاپ این عکس را انتخاب و جایگذین کنید.

پوشه aboutرا کپی کنید  و نام کپی را servicesبگذارید . روی پوشه servicesکلیک کنید و آن را کپی کنید و نام آن را portfolioبگذارید.

ما الان سه پوشه داریم ("about", "services","portfolio")محتویات پوشه portfolioرا به خط راهنمای سمت چپ بچسبانید.

آموزش فتوشاپ قالب سایت گرافیکی

 

همه سه پوشه را انتخاب کرده و دستور Layer > Distribute > Horizontal Centersرا برای دادن فاصله یکسان به آنها انتخاب کنید:

آموزش فتوشاپ قالب سایت گرافیکی

 

عناوین این سه کادر را به ترتیب smashingDzine, ourservices, our portfolioشما میتوانید این عناوین را طبق نیاز خود تغییر دهید.

آموزش فتوشاپ قالب سایت گرافیکی

 

یک پاصفحه طراحی کنید

یک پوشه به نام پاصفحه ایجاد کرده و ابزار رسم مستطیل را با کلید Shift+Uانتخاب کنید. ویک مستطیل در ابعاد 100×1200 در زیر صفحه طراحی شده ایجاد کنید. نام این لایه را footer bgاز همان گرادانتی که برای header bgاستفاده کنید کافیست که استایل لایه header bgرا به این لایه کپی کنید.

آموزش فتوشاپ قالب سایت گرافیکی

 

ابزار تایپ را انتخاب کنید و متن کپی رایت را تایپ کنید ما از فونت Arialو اندازه 24 و رنگ خاکستری با کد (#dddddd)استفاده کرده ایم.

آموزش فتوشاپ قالب سایت گرافیکی

 

ما کادر ایمیل برای اشتراک را در سمت راست پاصفحه قرار میدهیم یک پوشه در داخل پا صفحه به نام subscribeایجاد کنید. ابزار رسم مستطیل گوشه گرد را باکلید Shift+Uانتخاب کنید. و یک مستطیل به ابعاد 35×85 با نام subscribe btnایجاد کنید.

این گام را برای ایجاد فیلد ورود ایمیل و عنوان آن تکرار کنید.

قالب سایت با فتوشاپ

با با ابزار تایپ عبارت Subscribeرا با فونت Arialدر استایل Bold و اندازه 13 بر روی دکمه تایپ کرده ایم دکمه و عبارت روی آن را در پنل لایه ها انتخاب کنید.

با ابزار رسم مستطیل گوشه گرد با گردشدگی 3 پیکسل مستطیلی به ابعاد 35×210 برای فیلد ورود ایمیل ایجاد کرده ایم و رنگ آن را سفید و نام آن را email fieldگذاشته و عبارتی را با رنگ سفید در بالای کادر ورود ایمیل وارد کرده ایم.

آموزش فتوشاپ قالب سایت گرافیکی

 

 

نتیجه نهایی

در تصویر زیر ما نتیجه نهایی کار خود را خواهیم دید:

آموزش فتوشاپ قالب سایت گرافیکی

 

تهیه شده در صحفه آموزش فتوشاپ با ما در تماس باشید.

نويسندگان balahang
تعداد بازديد : 1052
نظرات كاربران :
نام :
ايميل :
متن نظر : * 
 
متن بالا را وارد نماييد* 
 
جدیدترین مقالات
آموزش فتوشاپ رنگی کردن عکس
آموزش فتوشاپ رنگی کردن عکس
آموزش فتوشاپ قالب اخبار فوتبال
آموزش فتوشاپ قالب اخبار فوتبال
آموزش فتوشاپ طراحی قالب سایت عکاسی
آموزش فتوشاپ طراحی قالب سایت عکاسی
آموزش فتوشاپ قالب سایت گرافیکی
آموزش فتوشاپ قالب سایت گرافیکی
آموزش فتوشاپ تایپوگرافی
آموزش فتوشاپ تایپوگرافی
آموزش فتوشاپ ایجاد یک متن دیجیتال زیبا
آموزش فتوشاپ ایجاد یک متن دیجیتال زیبا
آموزش تایپوگرافی متن ترسناک در فتوشاپ
آموزش تایپوگرافی متن ترسناک در فتوشاپ
آموزش فتوشاپ نوع ترکیبی
آموزش فتوشاپ نوع ترکیبی "Difference"
آموزش فتوشاپ ایجاد یک طرح با چرخاندن و معکوس کردن تصویر
آموزش فتوشاپ ایجاد یک طرح با چرخاندن و معکوس کردن تصویر
آموزش فتوشاپ فکوس روی دسته ای از تصاویر
آموزش فتوشاپ فکوس روی دسته ای از تصاویر
آموزش فتوشاپ تایپو گرافی متن محو شده
آموزش فتوشاپ تایپو گرافی متن محو شده
آموزش فتوشاپ ایجاد یک متن پلاستیکی ساده
آموزش فتوشاپ ایجاد یک متن پلاستیکی ساده
آموزش فتوشاپ قرار دادن چند تصویر بر روی یک متن
آموزش فتوشاپ قرار دادن چند تصویر بر روی یک متن
آموزش فتوشاپ ایجاد یک متن ژله ای
آموزش فتوشاپ ایجاد یک متن ژله ای
آموزش فتوشاپ متن درهم فرورفته
آموزش فتوشاپ متن درهم فرورفته
آموزش فتوشاپ باز تابش نور از پنجره با جابجایی نقشبندی نور
آموزش فتوشاپ باز تابش نور از پنجره با جابجایی نقشبندی نور
آموزش فتوشاپ درخشش در بخش روشن تصویر
آموزش فتوشاپ درخشش در بخش روشن تصویر
آموزش فتوشاپ متحد کردن رنگها در یک تصویر
آموزش فتوشاپ متحد کردن رنگها در یک تصویر
آموزش فتوشاپ ایجاد یک تصویر درهم بافته شده
آموزش فتوشاپ ایجاد یک تصویر درهم بافته شده
آموزش فتوشاپ روتوش تصاویر در لایه های جداگانه
آموزش فتوشاپ روتوش تصاویر در لایه های جداگانه
آموزش فتوشاپ روتوش عکس با تناژهای رنگی آماده
آموزش فتوشاپ روتوش عکس با تناژهای رنگی آماده
آموزش فتوشاپ روتوش سریع چهره
آموزش فتوشاپ روتوش سریع چهره
آموزش فتوشاپ بازتابش نور از پنجره
آموزش فتوشاپ بازتابش نور از پنجره
آموزش فتوشاپ نقاشی با براش آبرنگی روی تصویر
آموزش فتوشاپ نقاشی با براش آبرنگی روی تصویر
آموزش فتوشاپ ایجاد تصویر یک گانگستر
آموزش فتوشاپ ایجاد تصویر یک گانگستر
آموزش فتوشاپ افزودن تاتو واقعی
آموزش فتوشاپ افزودن تاتو واقعی
آموزش فتوشاپ ایجاد براش رعدوبرق
آموزش فتوشاپ ایجاد براش رعدوبرق
آموزش فتوشاپ  تایپوگرافی سایه دراز
آموزش فتوشاپ تایپوگرافی سایه دراز
آموزش فتوشاپ تغییر رنگ رژلب
آموزش فتوشاپ تغییر رنگ رژلب
آموزش فتوشاپ شارپ کردن چشم ها همه تکنیک ها
آموزش فتوشاپ شارپ کردن چشم ها همه تکنیک ها
پربازدیدترین مقالات