در این مقاله یک قالب برای یک سایت مجله فوتبالی طراحی خواهیم کرد. شما میتوانید این کار را برای تیم محبوب خود استقلال انجام دهید.
آموزش فتوشاپ طراحی قالب سایت مجله فوتبال
کارهای روزانه من به این ترتیب است طراحی قالب، تبدیل قالب به کد و فوتبال در این آموزش میخواهم که این فعالیت ها را باهم ترکیب کنم . بنابراین تصمیم گرفتم قالب یک سایت مجله فوتبال را ایجاد کنم.
در مجلات اهمیت، بیشتر با مطالب است. ولی ما تصمیم داریم کمی روی تصاویر تمرکز بیشتر داشته باشیم. دلیل این کار علاقه مفرط شخصی به تصاویر این بازی زیبا است.
در آینده نزدیک آموزش های طراحی قالب سایت در فتوشاپ را در سری آموزش های طراحی سایت به کد HTML و بعد از آن در آموزش نرم افزار های مدیریت محتوا به قالب وردپرس تبدیل خواهیم کرد.
نتیجه نهایی
در تصویر زیر نتیجه نهایی کار ما را خواهید دید.
بوم
در فتوشاپ یک سند 1200×2100 پیکسل با resolution=72 pixels/inch در آموزش فتوشاپ طراحی قالب سایت تک صفحه ما از سیستم شبکه بندی 960 grid با ایجاد 12 ستون طرح خود را ایجاد کردیم . در این آموزش ما سیستم آموزش قبل را با افزودن یک ستون ویرایش و استفاده می کنیم. برای اینکار از خطوط راهنمای فتوشاپ استفاده میکنیم. (View>New guide )
گام 1- لایه پس زمینه
لایه بکگراند را با رنگ خاکستری با کد هگزادسیمالeee # پر کنید. با ابزار رسم مستطیل در بالای صفحه یک مستطیل رسم کنید. رنگ مستطیل را به سفید با کد هگزادسیمال ffffff# تغییر دهید. از پنل لایه ها استایل لایه pattern overlay را اجرا کنید و الگوی Soft Grunge Patterns را اضافه کنید.
حالا لایه جدیدی اضافه کنید ، از ابزار ایجاد ناحیه انتخاب مستطیل استفاده کرده و یک مستطیل ایجاد کرده و آنرا با رنگ سیاه پر کنید. حالا دستور Free Transform را اجرا و به warp mode بروید حالا شکل زیر را ویرایش کنید.
حالا به این لایه یک فیلتر Gaussian blur اضافه کنید :
حالا این لایه سیاه را به زیر لایه سفید برده تا سایه زیبایی بدست بیاورید.
یک لایه جدید ایجاد کنید برای سرعت عمل در این کار از کلید میانبر Ctr+Shift+n استفاده کنید. در این لایه با ابزار رسم نوار انتخاب عرضی یک پیکسلی Single Row Marquee Tool دو خط انتخاب مانند تصویر زیر ایجاد کنید:
حالا ما میخواهیم که مقداری جزئیات به آن اضافه کنیم . یک سند جدید با ابعاد 500×500 پیکسل ایجاد کنید. حالا با ابزار Pen یک توپ فوتبال ایجاد کنید. راستش من این تصویر را از اینترنت دانلود کردم اینکار سریعتر خواهد بود. تصویر ساخته شده را به سند اصلی ببرید و مکان آن را درست کنید. میزان opacity را کم کرده و آن را در زیر هدر سایت قرار دهید. نکته اگر واقعا این توپ را میخواهید با ابزار Pen ایجاد کنید کافیست که قسمت های مشکی را ایجاد کنید.
گام 2 : هدر سایت
حالا هدر سایت را با یکسری عناصر باید پرکنیم. منظور از عناصر لوگو و نوار جستجو است.
برای لوگو ، ما از فونت Harabara و برای بقیه قسمت های سایت از فونت Lucida Sans استفاده میکنیم.
ما با ابزار تایپ و رنگ dbdbdb# متن لوگو را تایپ کرده ایم. در آموزش ابزار تایپ یا Type Tool در فتوشاپ نحوه کار با ابزار تایپ را آموزش داده ایم.
ما لوگوی خود را با تکرار آن و سایه ای به رنگ f2f2f2 # کمی ویرایش کرده ایم. در طر احی قالب لوگو اهمیت زیادی ندارد. ولی شما باید آنرا در طرح بیاورید و بعد از فروختن طرح لوگو با لوگوی شرکت اصلی عوض میشود . طراحان و شرکت های معتبر روی طرح های خود لوگوی خود را قرارمیدهند و به مشتری این امکان را میدهند که این لوگو را تغییر دهد. مثال شرکت دروپال از لوگوی رسمی دروپال برای قالب های خود استفاده میکند و شرکت های بسیاری همین کار را انجام میدهند. ولی من ترجیح میدهم لوگو با قالب هماهنگ باشد و برای هر قالب یک لوگوی هرچند ساده ایجاد می کنم.
متن سوم را با رنگ هگزادسیمال 000000# اضافه خواهیم کرد:
یک شیئ مستطیل ایجاد کنید و به آن رنگ 000000 # را بدهید. یک متن و یک جعبه متن برای جستو به این ناحیه اضافه کنید:
ما با ابزار رسم خط در اندازه Weight: 5px و ابزار رسم بیضی یک زره بین برای ناحیه جستجو ایجاد کرده ایم. بار دیگر باید بگوییم که در حقیقت ما این عکس را از اینترنت دانلود کرده ایم . ولی ایجاد آن هم کار چندان پیچیده ای نیست:
دو مستطیل را برای ایجاد دو دکمه ساده به رنگ های 97bd0e, #029de0 #و رنگ ffffff # برای متن این دکمه ها استفاده کرده و به نوشته این دکمه ها استایل لایه Drop Shadow بدهید.
گام 4- مقالات ویژه
با کمک خطوط راهنما و ابزار رسم مستطیل و رنگ سفید و استایل لایه Drop Shadow and Stroke این بخش را مانند اشکال زیر ایجاد کنید.
من متاسفانه عکسی از بازی استقال و العین پیدا نکردم . بنابراین عکس از بازیکنان محبوبم را دانلود و به این قسمت اضافه کردم . ما یک مستطیل هم اضافه کرده ایم و یک خط در زیر آن و یک کادر آبی برای یک عنوان و تایپ یکسری متون در این کادر ها با فونت Lucida Sans را انجام داده تا بخش مقالات ویژه آماده شود شما میتوانید با فونت های سری F برای تایپ فارسی مطالب مربوط به بازی زیبای استقلال مقابل العین را تایپ کنید.
ما قطعا به قسمت های بیشتری در یک مجله نیاز داریم بنابراین مستطیل های بیشتری برای مقلات بعدی اضافه خواهیم کرد. در هر دسته بندی از رنگ متفاوتی برای عنوان استفاده کنید.
گام 5 – سایر مقالات
به همان سبک قبل محل مقالات دیگر را ایجاد کنید. به تصویر زیر نگاه کنید . ما به هر قسمت رنگی برای پس زمینه ام داده ام . خط طوسی بالا را با ابزار رسم خط 1 پیکسلی ایجاد کرده ایم:
گام 6: پاصفحه
ما از ابزار رسم مستطیل و ابزار تایپ برای ایجاد یک منو در پا صحفه استفاده کرده ایم . به آموزش آموزش طراحی سایت منوی شناور مراجعه کرده و در باره طراحی منو ها در سایت بیشتر مطالعه کنید.
یک نماد ساده میتواند پا صفحه ما را متفاوت کند. برای اینکار یک دایره و خط دور و کمی سایه برای آن ایجاد کنید درست مانند تصویر زیر :
برای ایجاد تغییر از ابزار رسم خط به اندازه Weight: 12px و ابزار رسم دایره استفاده کنید :
ما با ابزار رسم دایره و ابزار قلم یک ایکون از یک توپ فوتبال ایجاد کرده ایم. شما میتوانید ایکون توپ فوتبال را از اینترنت دانلود کنید:
برای ایجاد توپ ما از دو لایه و کلیپ ماسک استفاده کرده ایم. در آموزش آموزش کلیپ ماسک با فتوشاپ میتوانید اطلاعات بیشتری درباره کلیپ ماسک بدست بیاورید.
ما بعد از افزودن توپ به سند اصلی چند عنصر گرافیکی دیگر به آن اضافه کردیم:
شما هم سعی کنید علامت X و فلش را ایجاد و به آنها سایه بدهید.
گام 7: نوار منوی کناری
ما قصد داریم که یک منو به کنار تصویر اضافه کنیم .برای اینکار از ابزار رسم مستطیل استفاده کنید. و با کمک خطوط راهنما آن را ایجاد کنید:
به منو ها استایل اضافه کنید:
در اینترنت ایکون های شبکه های اجتماعی محبوبتان را جستجو کنید. ما این ایکون ها و متن منوی کناری سایت را ایجاد کرده ایم:
یک ناحیه ایجاد کنید که عنوان را به آن اضافه کنید.
یک دایره رسم کنید و آن را در پایین سمت راست ابزار های سایت قرار دهید. دور این لایه یک ناحیه انتخاب ایجاد کنید و کلید Alt را فشار دهید و یک ماسک لایه به این لایه اضافه کنید.
در آموزش های ماسک گذاری در فتوشاپ و انواع مختلف ماسک در باره نحوه کار با ماسک توضیحات لازم داده شده است. لطفا این مقالات را مطالعه نمایید.
به این لایه استایل soft Drop Shadow را اضافه کرده و یک خط دور 1 پیکسلی سفید به آن اضافه کنید. حالا Fill=0% را تنظیم کنید:
یک دایره سفید ایجاد کنید و آن را در مکان مناسب قرار دهید . به آن عنوان اضافه کرده و استایل لایه soft Inner Shadow بدهید.
این آموزش همینجا به پایان رسید شما میتوانید از تصاویر تیم مورد علاقه خود بجای این تصاویر استفاده کنید و تصاویر بازی های بیاد ماندنی مسابقات را اضافه کندی کنید. بطور مثال همانطور که گفتیم طرفداران استقلال میتوانند بازی بیادماندی با العین را برای طراحی قالب سایت خبری خود انتخاب کنند.
تهیه شده توسط شرکت طراحی سایت سارگون با ما در تماس باشید .
این آموزش را با دوستان خود به اشتراک بگذارید.