ساخت وب سایت در زمینه ی تکنولوژی با Adobe Photoshop

Posted by ناشناس

در این پست شما نحوه ی طراحی یک “Premium” blog layout را توسط فتوشاپ یاد خواهید گرفت.این آموزش توسط Jean-Baptiste Jung در سایت http://psdvibe.com

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

مرحله ی اول : یک سند جدید با سایز is 1280*1200 pixels ایجاد کنید.پس زمینه را مشکی بگذارید(#000000)
مرحله ی 2 : یک لایه ی جدید به نام content بسازید ابزار Rectangular marquee tool را بردارید و یک مستطیل به عرض 976px بکشید.با رنگ سفید(#FFFFFF) آن را پر کنید.
مرحله ی 3 : در همان لایه ی content برای کشیدن ساید بار دوباره rectangular marquee tool را بردارید و یک ساید بار بکشید. Width آن 331px و رنگ پس زمینه ی آن را #E9E9E9 بگذارید.
تا این مرحله باید یک همچین چیزی داشته باشین....

Creating a tech blog layout in Adobe Photoshop

مرحله ی 4 : لایه ی جدیدی به نام header بسازید.ما الان آماده ی درست کردن یک پس زمینه ی HEADER هستیم.برای این کار من ابتدا این عکس را دانلود کردم و در فتوشاپ ایمپورت کردم.وقتی که عکس import شد این کار را بکنید،Filter, Blur, Mottion blur و بر اساس پارامترهای زیر آن را اعمال کنید.

مرحله ی 5 : وقتی انجام شد،عکس را بیارید و آن را به 972*188px کراپ کنید(crop) .سپس به منوی image بروید و انتخاب کنید : Ajdjustments, Color balance . آبی را به highlight, shadows and midtones اضافه کنید. Header باید این گونه باشد :

مرحله ی 6 : نوبت رسم منوی navigation هست. دوباره ectangular marquee tool را بردارید و مستطیلی 972*53 pixels بکشید در یک لایه ای به نام navigation. رنگشو بکنید #080808
مرحله ی 7 : بر روی لایه ی navigation کلیک راست کنید و Blending options را انتخاب کنبد. مادامی که لایه ی ویندوز باز است ، Gradient overlay را اضافه کنید.وضوح را بر روی 65 درصد قرار داده و #000000 برای چپ و #3F3E3E بر روی راست اعمال کنید.

مرحله ی 8 : خب ابزار نوشتن رو بیارید و شروع به اضافه کردن navigation link بر روی nav bar بکنید.من Arial bold را با سایز 18 و رنگ سفید انتخاب کردم.
مرحله ی 9 : برای اینکه بر روی لینک های منو جذابیت ایجاد کنید ابزار مستطیل را انتخاب و دور لینک هایتان شکلی را رسم کنید. شعاع دور این مستطیل 10 پیکسل و background color is #6589A7 .

مرحله ی 10 : خب زمان اضافه کردن لوگو به سایت است.من فونت Futura bold با 72pt font size و black color (#FFFFFF) انتخاب کردم.این لایه هست، با دوبرابر کردن آن کار خود را برای دیگران سبک تر کنید.
مرحله ی 11 : مطمئن باشید اولین لایه(نه کپی آن) انتخاب شده باشد.روی آن کلیک راست کنید و Blending options را انتخاب کنید.سپس Gradient overlay را انتخاب کنید و چپ را #EEEFF0 و راست را #4E4D4D قرار دهید.

مرحله ی 12 : لایه ی شما و هدر شما تمام شد و باید به شکل زیر در بیاید.

مرحله ی 13 : الان زمان درست کردن بخش پست هاست.اولین مرحله درست کردن لایه ای به نام post و 3 تا عکس 200 در 200 پیکسل انتخاب کنید.یکی از عکس ها را ایمپرت کنید و در محل مشخص شده قرار دهید.
14 : فونت انتخاب شده برای title بسته به مطلب خودتون اگر انگلیسی باشه بهتره اینجری باشه :
is #222222 Arial, bold, 36pt ،مطلبی را که برای عنوان مطلب می خواهید وارد کنید .در منوی فتوشاپ به قسمت Window و سپس منوی Paragraph بروید،مشخصه ی AV را به -75 براساس اسکرین شات زیر انتخاب کنید.

مرحله ی 15 : text tool را دوباره انتخاب کنید و نام نویسنده را بنویسید،همچنین دسته ی مربوط به پست و تعداد نظرات ننیز بنویسید.فونتشو بدین صورت انتخاب کنید : white (#FFFFFF) 12pt Arial bold font
مرحله ی 16 : rectangular marquee tool را انتخاب و مستطیلی را برروی متنی که الان نوشتید بکشید.رنگ داخل مستطیل #6589A7 باشد.مطمئن باشید که لایه ی متن بالای شکل باشد.
مرحله ی 17 : حالا در قسمت متن با فونت Arial font, 12pt, Italic. Color is #555555 مطلب مورد نظر را بنویسید.البته انتخاب فونت و بقیه ی فاکتورها بستگی به سلیقه شما دارد.

مرحله ی 18 :ابزار کشیدن خط برای کشیدن خط زیر مطلب را برداریدLine Tool و یک خط به رنگ #CCCCCC زیر پست بکشید.پست باید شبیه شکل زیر باشد.
مرحله ی 19 : بسته به اینکه چند تا پست می خواهید در صفحه ی اولتان باشد همین کارها و را انجام دهید و لایه های مورد نظر را کپی و پیست کنید.

تا الان بخش اصلی صفحه تمام شد و حالا نوبت ساید بار می باشد.
مرحله ی 20 : خب پس زمان خلق ساید بار برای کنار وبلاگ می باشد.با درست کردن لایه ای به نام sidebar کار را شروع می کنیم.اولین چیزی که لازم است بحث 125*125px تبلیغات و اسپانسرهاست که من در فایل psd 4 نمونه تبلیغ گذاشتم.

مرحله ی 21 : با استفاده از ابزار رسم مستطیل،مستطیلی به اندازه ی ........... بکشید و درون آن متن مورد نظر خود را بیاورید و کنار گوشه ی سمت راست پایین آن را طبق شکل زیر و با استفاده از ابزار lasso درست کنید تا به زیبایی کار افزوده شود.

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

مرحله ی 23 : در آخر نوبت قسمت توضیحات و copyright سایت هست که ابتدا توسط Rectangular marquee tool مستطیلی را به اندازه ی....... رسم کنید و درون آن را به رنگ مورد نظر قرار دهید .سپس متن مورد نظر خود را درون آن قرار دهید.