ساخت وب سایت با فتوشاپ
● قدم اول:
در این سلسله آموزش شما یاد خواهید گرفت که چگونه یک وب سایت را فتوشاپ طراحی کنید.
در این آموزش فرض بر این است که شما تا حدودی به فتوشاپ آشنایی داشته با لایه ها و ماسک آشنایی دارید.
در انتهای آموزش شما قادر خواهید بود که سایتی به شکل زیر داشته باشید:
● قدم دوم:
اجاز دهید تا کار را آغار کنیم.قبل از هرچیز شما به یک طرح رنگ داشته باشید. این یک اشتاه بزرگی است که رنگها را بطور تصادفی انتخاب کنید و ببینید کدام یک به کار شما بیشتر می نشیند. دو
برنامه مورد علاقه من در طراحی ها برنامه color picker و برنامه colourlovers می باشد. شما همچنین می توانید از پالت swatches فتوشاپ بهره جویید. شما می توانید رنگهای مورد علاقه خود را
انتخاب کنید. من با رنگ آبی تک رنگ کار خواهم کرد که به حقیقت یکی از رنگهای مورد استفاده در بسیاری از صفحات وب می باشد.
● قدم سوم:
حالا شما رنگ مورد نظر خود را در ذهن دارید. در فتوشاپ یک فایل جدید باز کنید. اندازه آن باید ۸۰۰ در ۸۰۰ باشد. بر اساس استاندارهای وب صفحات اینترنتی نباید بزرگتر از ۷۷۰ پیکسل عرض داشته
باشند چرا که هنوز بسیاری از کاربران از رزولوشن ۸۰۰ در ۶۰۰ استفاده میکنند. این فایل با عرض ۸۰۰ پیکسلی را ما به عنوان یک پس زمینه برای صفحه وب خود قرار می دهیم.
● قدم چهارم:
حال که شما فایل خود را آماده کرده اید نیاز به خطوط راهنما دارید. ( در نظر داشته باشید این خطوط راهنما بر اساس سایتی است که می خواهید در انتها داشته باشید و ما بر اساس شکل فوق
این خطوط را ترسیم میکنیم.)
این خطوط به شما کمک می کنند تا تمام اجزا سایت شما در محل درست خود قرار گرفته باشند.
برای ایجاد خطوط راهنمای جدید که از این پس آنها را guide می نامیم به گزینه View > New Guide می روید.در این منو شما قادر خواهید بود که guide های افقی یا عمودی داشته باشید و مقدار آن
را نیز از لحاظ کلفتی مشخص کنید. شما باید guide های افقی در مقادیر ۱۵, ۲۵, ۱۷۵, ۱۸۵, ۲۱۵, ۲۲۵, ۷۰۰, ۷۱۰, ۷۷۵, ۷۸۵ و guide های عمودی در ۱۵, ۲۵, ۲۷۵, ۷۷۵, ۷۸۵ ایجاد کنید. مطمئن
شوید View > Snap و View > Snap To > Guides چک مارک خورده باشند. وقتی شما کار را تمام کرده باشید شکلی شبیه به شکل زیر خواهید داشت.
● قدم پنجم :
خوب من برای هر قسمت این صفحه وب یک گروه لایه ها تشکیل می دهم.پیشنهاد می کنم شما هم برای مرتب بودن کار این کار را انجام دهید. یک گروه لایه جدید با نام بکگراند تشکیل دهید. شما
باید یک لایه جدید تشکیل دهید و با هر رنگی که مایل بودید آن را پر کنید . این مهم نیست از چه رنگی استفاده میکنید.(من از این رنگ استفاده کردم ۰۰۰۰FF) چون ما بعدا آن را به گرادیانت تغیر
میدهیم.
● قدم ششم:
حالا وقت آن است که کانتینر را شروع کنیم. کانتینر لایه ای است که همه محتوای صفحه وب ما در آن قرار خواهد گرفت. یک لایه جدید با همین نام ایجاد کنید. ابزار مستطیل لبه گرد (Rounded Rectangle Tool
)را انتخاب کنید. ( با shortcut U ) مقدار شعاع را از منوی بالا هر مقدار که مایلید می توانید اختیار کنید. هر چه عدد بالاتر باشد قوس بیشتری خواهید داشت من Radius را برابر ۱۵ انتخاب میکنم. هر
رنگی را که مایلید صفحه وب شما داشته باشد را انتخاب کنید.
من رنگ سفید تیره را انتخاب کرده ام. سپس از بیرونی ترین خطوط راهنما شروع به ترسیم مستطیل بکنید. اگر شما همه مراحل قبل را درست انجام داده باشید به طور اتوماتیک این مستطیل به
خطوط راهنما خواهد چسبید (snap) می توانید از بافتها و *****های مختلفی روی کار استفاده کنید تا شکل جالبتری داشته باشید. این آموزش به نحوه ساختن این *****ها نخواهد پرداخت.( من از
***** rough Pastels استفاده کردم با کمی افکت)
● قدم هفتم:
حال قسمت Header سایت را آماده میکنیم. یک لایه جدید با همین نام ایجاد کنید. ابزار مستطیل لبه گرد را دوباره انتخاب کنید. این بار شعاع ۷ را انتخاب کرده ام. مانند شکل یک مستطیل می
کشیم و افکت inner shadow با مقدار Distance صفر و opicity پایین را به آن میدهیم فعلا چون رنگ آن مشکی است این تغییرات شاید دیده نشود. ولی فعلا مهم نیست. رنگ بعدا تغییر میکند.باید
شکلی شبیه به زیر داشته باشید
● مرحله هشتم:
حالا از این لایه یک کپی تهیه کنید. سپس با گرفتن کلید Alt و کلیک بین دو لایه ( لایه اصلی و لایه کپی شده ) یک clipping mask اضافه کنید. سپس آن را رنگ کنید . من یک رنگ آبی تیره انتخاب
کردم و سپس افکت گرادیانت به آن دادم همانطور که در لایه بکرگراند همچنین کاری را انجام دادید. نتیجه کار چیزی شبیه به شکل زیر باید ساخته باشید:
● قدم نهم:
حالا شما باید عکسی که به عنوان نماد کار شما است رو انتخاب کنید. البته این عکس نباید لوگو شما باشه. اگر در زمینه هوستینگ کار مکینید عکس یک سرور اگر در زمینه وب کار مکیند یه طرح از
وب و یا اگر فروشنده چیزی هستید عکسی از محصولات خودتون می تونه گزینه مناسبی باشه. من سرستون تخت جمشید رو انتخاب کردم ( فقط برای قشنگی). این لایه جدید را بالای لایه مرحله
قبل بگذارید و آن را به لایه قبلی clip کنید. (گرفتن alt و کلیک بین دو لایه)
بهتره اینجا کار این clip masking رو هم توضیح بدم. اگر لایه بالایی شما بزرگتر از لایه زیری باشه لایه جدید در اندازه لایه زیری محدود میشه. برای اینکه بهتر درک کنید یه لایه که عرضش از header
شما بزرگتره انتخاب کنید و سپس اونو clip کنید تا منظورمه کامل بفهمین.
باید حالا چیزی شبیه به شکل زیر داشته باشید:
● قدم دهم:
حالا وقت آن رسیده تا لوگو سایت خود و اسم آن را درج کنید. (تغییراتی جزیی در این مرحله کار داده شد تا سایت ساخته شده راست به چپ باشد. از جمله تغییر در محل لوگو یا خطوط راهنما.
سوالی بود در قسمت یادداشتها بپرسید)
● قدم یازدهم:
حالا نوبت به تهیه منو هاست. یک لایه جدید با این نام تشکیل دهید. ابزار مستطیل لبه گرد را انتخاب کنیدو بین خطوط راهنما محل منوها را بکشید. استایلهایی را که برای header استفاده کردید
می توانید برای منوها هم استفاده کنید.( ابتدا روی لایه کلیک راست کنید گزینه copy style را انتخاب و سپس روی لایه جدید گزینه paste style را انتخاب کنید)
حالا منوهایی را که می خواهید در سایت داشته باشید را تایپ کنید از هر فونتی که مایل باشید می توانید استفاده کنید.
● قدم دوازدهم:
حالا نوبت به بدنه اصلی سایت رسیده است. لایه جدید به نام body ایجاد کنید. و بین خطوط راهنما با ابزار مستطیل لبه گرد آن را بکشید . بهتر است از رنگ سفید استفاده کنید تا متون اصلی
سایت که به رنگ مشکی خواهند بود قابل خواندن باشند. بهتر خواهد بود که از افکت inner & drop shadow هم استفاده کنید.
