آموزش فتوشاپ : طراحی سایت نمونه کار - قسمت دوم

گام 9 : ایجاد خطوط راهنمای بیشتر

در این مثال قصد داریم تصاویر نمونه کار را با اندازه 640x480 پیکسل ایجاد کنیم. میخواهیم تصاویر نمونه کار در مرکز صفحه باشند و آنها را در بالای منوی راهبری قرار دهیم بنابراین به خطوط راهنمای بیشتری نیاز داریم

از منو View > New Guide را انتخاب کنید و خطوطی عمودی با فاصله 180 پیکسل و 660 پیکسل ایجاد کنید. این خطوط تصاویر را در مرکز صفحه و در بالای منوی راهبری قرار میدهند.

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

در نهایت دو خط راهنمای عمودی دیگر با فاصله های 1040 پیکسل و 1070 پیکسل ایجاد می کنیم . این خطوط لبه های تصاویری که دیده میشوند و همچنین فاصله بین تصاویر را مشخص میکنند .

گام 10 : ایجاد مکان قرار گیری تصاویر

در پانل لایه ها یک گروه بنام Projects ایجاد نمایید. با استفاده از ابزار Rectangle tool یک مستطیل به ابعاد 640x480 پیکسل ایجاد کنید. این تصویر را در بالا و سمت چپ خط راهنمای عمودی در فاصله 400 پیکسل و در بالا خط راهنمای افقی با فاصله 180 پیکسل قرار دهید. این مستطیل بعنوان مکان قرار گیری تصویر نمونه کار خواهد بود. بر روی لایه مستطیل راست کلیک کنید و Rasterize Layer انتخاب کنید

حال با نگهداشتن دکمه Alt تصویر را انتخاب و بکشید تا یک کپی از تصویر ایجاد شود. این تصویر را در سمت راست تصویر قبلی با فاصله 30 پیکسل بر روی خط راهنمای عمودی در 1070 پیکسل و همان خط افقی پایه قبلی قرار دهید.

دو کپی دیگر از این تصاویر ایجاد کنید و در زیر تصاویر قبلی با فاصله 30 پیکسل از یکدیگر قرار دهید

با ابزار Paint Bucket tool هر یک از مستطیلها را با رنگ #252a3a پر می کنیم.

گام 11 : ساخت افکت حاشیه تصویر قدیمی

در زیر گروه Navigation و در بالای گروه Projects یک گروه جدید بنام Vignette ایجاد کنید.

یک لایه جدید ایجاد کنید . رنگ پیش زمینه را  #0f1219 انتخاب کنید. با ابزار Paint Bucket tool لایه را با رنگ پیش زمینه پر کنید.

با ابزار Ellipse tool یک بیضی بکشید بصورتی که از گوشه های تصویر اصلی در محل تقاطع خطوط راهنما عبور کند

برای ایجاد افکت فریم قدیمی باید ناحیه انتخاب شده را با محو شدگی لبه ها حذف کنید. برای این منظور در حالی که بیضی در حال انتخاب است از منو Select > Modify > Feather را انتخاب کنید. مقدار Feather را 60 پیکسل انتخاب کنید. سپس قسمت انتخاب شده را با فشردن کلید Ctrl+X پاک کنید.

گام 12 : ایجاد ماسک پروژه ها

میخواهیم تصاویر پروژه ها را نشان دهیم. اسکرین شاتهایی از پروژه ها در مکانهای تصاویر قرار میدهیم. به گروه Projects باز گردید و یک اسکرین شات از پروژه ها را در مکان تصویر اصلی پیست کنید. به این ترتیب لایه اسکرین شات در بالای لایه مکان تصویر اصلی پیست می شود. بر روی لایه راست کلیک کنید و clipping mask را انتخاب کنید.

سه اسکرین شات دیگر در مکانهای تصاویر اصلی قرار دهید

شفافیت تمام اسکرین شاتها را بجز اسکرین شات وسطی بر روی %20 درصد قرار دهید

گام 12 : قرار دادن متن

برای توضیح هر پروژه به سه لایه متن نیاز داریم. در بالای گروه vignette یک گروه جدید ایجاد کنید . متنها را در این گروه قرار خواهیم داد

در ابتدا برای عنوانها از یک فونت نازک استفاده می کنیم. برای این مثال از فونت DIN Light استفاده می کنیم با این وجود فونتهای مناسب دیگر نیز میتوانند استفاده شوند. با استفاده از ابزار Text tool یک مستطیل در بین خطوط راهنما در سمت چپ تصویر اصلی با فاصله 40 پیکسل از خط راهنمای بالایی تصویر بکشید.

رنگ فونت را  #FFFFFF و برای فاصله کمتر بین حروف tracking را بر روی 25- قرار دهید. سایز فونت را 28px انتخاب کنید.

همچنین برای دسته بندی پروژه و تاریخ پروژه یک خط ایجاد می کنیم. اندازه فونت را 14 پیکسل ، tracking را 100 و گزینه force capse را فعال نمایید. رنگ متن را نیز  #338966 انتخاب کنید تا از بقیه متنها متمایز باشد

برای متن بدنه از یک فونت سیستمی مانند Lucida Grande یا Lucida Sans Unicode استفاده می کنیم. سایز فونت را 12 پیکسل و رنگ آن را #8C8F95 و line height را 18 پیکسل انتخاب کنید

گام 14 : اضافه کردن کنترل ماوس

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

برای دکمه های راهبری جهت از تصاویر شفاف استفاده میکنم که با قرار گرفتن ماوس بر روی آنها تیرگی شان تغییر می کند.

در زیر گروه Vignette یک گروه جدید بنام Buttons ایجاد کنید.

یک سند جدید به ابعاد 37x37 پیکسل ایجاد کنید. با ابزار Pen tool یک فلش مانند تصویر زیر بکشید. مراحل گام 8 را تکرار کنید. با ابزار Path Selection Tool بر روی شکل راست کلیک کنید و Define Custom Shape را انتخاب کنید. شکل را ذخیره کنید.

به پروژه اصلی بازگردید. ابزار  Custom Shape tool  را انتخاب کنید و تصویر فلش را وارد صفحه کنید.

از منو select Edit > Transform > Flip horizontal را انتخاب کنید. با این عمل فلش برعکس میشود و سمت فلش به سمت راست برمیگردد.

از فلش کپی بگیرید و از منو Edit > Transform > Rotate 90 degrees Clockwise را انتخاب کنید تا فلش کپی شده به سمت پایین بچرخد.

هر یک از این فلش ها را در محل مناسب در اطراف تصویر قرار دهید. فلشها را با فاصله 15 پیکسل از تصویر قرار دهید تا با تصاویر کناری همپوشانی داشته باشند. سپس شفافیت آنها را بر روی %12 قرار دهید.

گام 15 : ساخت نقشه جهت یابی

برای اینکه کاربر بداند در کجای نمونه کارها قرار دارد یک شبکه جدید از خطوط راهنما و خطوطی با ارتفاعهای مختلف برای نشان دادن ستون تصاویر و یک تصویر برای نشان دادن موقعیت مشاهده ایجاد می کنیم

یک گروه جدید بنام Orientation ایجاد کنید و آن را در زیر گروه Vignette قرار دهید.

با استفاده از ابزار Pencil tool از منوی شناور یک براش مربعی شکل انتخاب کنید. رنگ #FFFFFF را انتخاب کنید و با ضخامت 5 پیکسل در کنار اولین خط راهنمای سمت چپ صفحه به ارتفاع 60 پیکسل بکشید.

از این خط 12 کپی بگیرید و با فاصله 12 پیکسل از سمت راست در کنار یکدیگر قرار دهید

شفافیت تمام لایه ها را بر روی %12 قرار دهید. بهترین روش برای این کار این است که ابتدا شفافیت لایه اول را تنظیم کنید سپس بر روی لایه راست کلیک کنید و Copy Layer Style را انتخاب کنید . سپس تمام لایه های باقیمانده را انتخاب و راست کلیک کنید و Paste Layer Style را انتخاب کنید

از منو Edit > Free Transform را انتخاب کنید و ارتفاع خطوط را بصورت رندم تغییر دهید. آنها را کوتاه و بلند کنید.

در نهایت ابزار pencil را انتخاب کنید و بر روی اولین خط یک خط کوتاه بعنوان مارکر بکشید. این خط کوچک بعنوان نشان دهنده موقعیت است.

گام 16 : ایجاد کنترلهای کیبرد

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

یک گروه بنام Keyboard ایجاد کنید و آن را در بالای گروه Vignette قرار دهید.

با استفاده از ابزار Rectangle Shape tool با نگهداشتن shift یک مربع 20x20 ایجاد کنید. رنگ آن را #262a34 انتخاب کنید. بر روی لایه مربع در پنل لایه ها راست کلیک کنید و Blendign Option را انتخاب کنید. گزینه Stroke را فعال کنید و یک حاشیه به ضخامت 1 پیکسل به رنگ #32343f در سمت خارجی مربع ایجاد کنید.

با استفاده از ابزار Pen tool ( دقت کنید که در نوار Option گزینه Style بر روی Default تنظیم شده باشد) با رنگ #fff d یک فلش کوچک تشکیل شده از چند پیکسل مربعی بکشید. در صورت لزوم برای ویرایش شکل از ابزار Direct Selection tool استفاده کنید. شفافیت را بر روی %20 تنظیم کنید.

در پنل لایه ها با نگهداشتن دکمه shift دو لایه ایی را که ایجاد کردید انتخاب کنید. راست کلیک کنید و ِDuplicat Layers را انتخاب کنید.

از منو Edit > Transform را انتخاب کنید و لایه های کپی شده را به سمت مناسب بچرخانید . به همین ترتیب برای هرچهار جهت فلش ها را ایجاد کنید.

نتیجه گیری

طراحی سایت نمونه کار را در این مرحله به پایان رساندیم . آنچه باقیمانده کد نویسی وبسایت با استفاده از HTML ، CSS ،  jQuery Hotkeys  و چند ترفند  اضافه  jQuery است.