ساختن یک وب سایت با فتوشاپ

درس اول

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

قدم دوم:
اجاز دهید تا کار را آغار کنیم.قبل از هرچیز شما به یک طرح رنگ داشته باشید. این یک اشتاه بزرگی است که رنگها را بطور تصادفی انتخاب کنید و ببینید کدام یک به کار شما بیشتر می نشیند. دو برنامه مورد علاقه من در طراحی ها برنامه color picker و برنامه colourlovers می باشد. شما همچنین می توانید از پالت swatches فتوشاپ بهره جویید. شما می توانید رنگهای مورد علاقه خود را انتخاب کنید. من با رنگ آبی تک رنگ کار خواهم کرد که به حقیقت یکی از رنگهای مورد استفاده در بسیاری از صفحات وب می باشد.

قدم سوم:
حالا شما رنگ مورد نظر خود را در ذهن دارید. در فتوشاپ یک فایل جدید باز کنید. اندازه آن باید 800 در 800 باشد. بر اساس استاندارهای وب صفحات اینترنتی نباید بزرگتر از 770 پیکسل عرض داشته باشند چرا که هنوز بسیاری از کاربران از رزولوشن 800 در 600 استفاده میکنند. این فایل با عرض 800 پیکسلی را ما به عنوان یک پس زمینه برای صفحه وب خود قرار می دهیم.

قدم چهارم :
حال که شما فایل خود را آماده کرده اید نیاز به خطوط راهنما دارید. ( در نظر داشته باشید این خطوط راهنما بر اساس سایتی است که می خواهید در انتها داشته باشید و ما بر اساس شکل فوق این خطوط را ترسیم میکنیم.)
این خطوط به شما کمک می کنند تا تمام اجزا سایت شما در محل درست خود قرار گرفته باشند.
برای ایجاد خطوط راهنمای جدید که از این پس آنها را guide می نامیم به گزینه View > New Guide می روید.در این منو شما قادر خواهید بود که guide های افقی یا عمودی داشته باشید و مقدار آن را نیز از لحاظ کلفتی مشخص کنید. شما باید guide های افقی در مقادیر 15, 25, 175, 185, 215, 225, 700, 710, 775, 785 و guide های عمودی در 15, 25, 275, 775, 785 ایجاد کنید. مطمئن شوید View > Snap و View > Snap To > Guides چک مارک خورده باشند. وقتی شما کار را تمام کرده باشید شکلی شبیه به شکل زیر خواهید داشت.

قدم پنجم :
خوب من برای هر قسمت این صفحه وب یک گروه لایه ها تشکیل می دهم.پیشنهاد می کنم شما هم برای مرتب بودن کار این کار را انجام دهید. یک گروه لایه جدید با نام بکگراند تشکیل دهید. شما باید یک لایه جدید تشکیل دهید و با هر رنگی که مایل بودید آن را پر کنید . این مهم نیست از چه رنگی استفاده میکنید.(من از این رنگ استفاده کردم 0000FF) چون ما بعدا آن را به گرادیانت تغیر میدهیم. به تنظیمات زیر رفته و مقادیر را انتخاب کنید.
blending option> Gradiaent Overlay

دقت کنید دقیقا عمودی باشد تا به مشکل برنخورید