گروه مقاله : آموزش فتوشاپ

تاريخ انتشار : 1396/03/02 - 09:32

كد :7560

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

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

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

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

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

نتیجه نهایی

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

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

برای اینجاد یک تصویر گرافیکی اول باید یک سند جدید باز کنیم کلید 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 گذاشته و عبارتی را با رنگ سفید در بالای کادر ورود ایمیل وارد کرده ایم.