● قدم اول:
در این سلسله آموزش شما یاد خواهید گرفت که چگونه یک وب سایت را فتوشاپ طراحی کنید.
در این آموزش فرض بر این است که شما تا حدودی به فتوشاپ آشنایی داشته با لایه ها و ماسک آشنایی دارید.
در انتهای آموزش شما قادر خواهید بود که سايتي به شكل زير داشته باشید:
● قدم دوم:
اجاز دهید تا کار را آغار کنیم.قبل از هرچیز شما به یک طرح رنگ داشته باشید. این یک اشتاه بزرگی است که رنگها را بطور تصادفی انتخاب کنید و ببینید کدام یک به کار شما بیشتر می نشیند. دو برنامه مورد علاقه من در طراحی ها برنامه color picker و برنامه colourlovers می باشد. شما همچنین می توانید از پالت swatches فتوشاپ بهره جویید. شما می توانید رنگهای مورد علاقه خود را انتخاب کنید. من با رنگ آبی تک رنگ کار خواهم کرد که به حقیقت یکی از رنگهای مورد استفاده در بسیاری از صفحات وب می باشد.
● قدم سوم:
حالا شما رنگ مورد نظر خود را در ذهن دارید. در فتوشاپ یک فایل جدید باز کنید. اندازه آن باید ۸۰۰ در ۸۰۰ باشد. بر اساس استاندارهای وب صفحات اینترنتی نباید بزرگتر از ۷۷۰ پیکسل عرض داشته باشند چرا که هنوز بسیاری از کاربران از رزولوشن ۸۰۰ در ۶۰۰ استفاده میکنند. این فایل با عرض ۸۰۰ پیکسلی را ما به عنوان یک پس زمینه برای صفحه وب خود قرار می دهیم.
● قدم چهارم:
حال که شما فایل خود را آماده کرده اید نیاز به خطوط راهنما دارید. ( در نظر داشته باشید این خطوط راهنما بر اساس سایتی است که می خواهید در انتها داشته باشید و ما بر اساس شکل فوق این خطوط را ترسیم میکنیم.)
این خطوط به شما کمک می کنند تا تمام اجزا سایت شما در محل درست خود قرار گرفته باشند.
برای ایجاد خطوط راهنمای جدید که از این پس آنها را guide می نامیم به گزینه View > New Guide می روید.در این منو شما قادر خواهید بود که guide های افقی یا عمودی داشته باشید و مقدار آن را نیز از لحاظ کلفتی مشخص کنید. شما باید guide های افقی در مقادیر ۱۵, ۲۵, ۱۷۵, ۱۸۵, ۲۱۵, ۲۲۵, ۷۰۰, ۷۱۰, ۷۷۵, ۷۸۵ و guide های عمودی در ۱۵, ۲۵, ۲۷۵, ۷۷۵, ۷۸۵ ایجاد کنید. مطمئن شوید View > Snap و View > Snap To > Guides چک مارک خورده باشند. وقتي شما كار را تمام كرده باشيد شكلي شبيه به شكل زير خواهيد داشت.
● قدم پنجم :
خوب من برای هر قسمت این صفحه وب یک گروه لایه ها تشکیل می دهم.پیشنهاد می کنم شما هم برای مرتب بودن کار این کار را انجام دهید. یک گروه لایه جدید با نام بکگراند تشکیل دهید. شما باید یک لایه جدید تشکیل دهید و با هر رنگی که مایل بودید آن را پر کنید . این مهم نیست از چه رنگی استفاده میکنید.(من از این رنگ استفاده کردم ۰۰۰۰FF) چون ما بعدا آن را به گرادیانت تغیر میدهیم.به تنظيمات زير رفته و مقادير را انتخاب كنيد.
blending option> Gradiaent Overlay
دقت كنيد دقيقا عمودي باشد تا به مشكل برنخوريد
حالا وقت آن است که کانتینر را شروع کنیم. کانتینر لایه ای است که همه محتوای صفحه وب ما در آن قرار خواهد گرفت. یک لایه جدید با همین نام ایجاد کنید. ابزار مستطیل لبه گرد (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 هم استفاده کنید.
قدم سيزدهم
صفحه ما قسمت footer را هنوز كم دارد. پس ابتدا را مي سازيم.
يك گروه لايه جديد به نام footer بسازيد. دقيقا مثل همان چيزي كه براي Header ساختيد ولي كوچكتر. ابزارRounded Rectangle Tool را انتخاب كرده و بين خطوط راهنما رسم كنيد. سايه هاي داخلي را از روي لايه قبلي به روي اين لايه نيز انتقال دهيد.از لايه يك كپي تهيه كرده سپس با گرفتن كليد Alt و كليك بين دو لايه ( لايه اصلي و لايه كپي شده ) يك clipping mask اضافه كنيد. سپس آن را رنگ كنيد . من يك رنگ آبي تيره انتخاب كردم و سپس افكت گراديانت به آن دادم. دقيقا عين آن كاري كه براي header انجام داده ايد.
سپس جمله كپي رايت خود را اضافه كنيد و در صورت تمايل عكس دلخواه خود را نيز قرار دهيد.حالا بايد چيزي شبيه به شكل زير داشته باشيد.
اكنون وقت آن رسيده تا اين تصوير را براي وب آماده كنيم. شايد آنهايي كه تا حدودي به فتوشاپ آشنايي دارند فكر ميكنن كه الان بايد از slice براي تكه كردن و قرار دادن تصاوير در صفحه وب استفاده كرد. در صورتيكه اگر از اين كار استفاده كنيم حجم صفحه وب بسيار بالا خواهد رفت.
شما بايد در اين مرحله از خصوصيت بك گراند جداول و css در وب استفاده كنيد. يعني به عنوان مثال يك ستون به عرض يك پيكسل از بك گراند انتخاب كنيد و سپس در طراحي وبتان دستور تكرار عمودي به آن بدهيد.تا كل صفحه وب شما را كامل كند.به اين طريق شما بكگراندهايي كاملي داريد كه فقط بايك فايل 1كيلوبايتي ساخته شده است.
براي اينكار كليه لايه ها به غير از بك گراند رامخفي كنيد. يك ستون به ابعاد 1*800 پيكسل از بك گراند انتخاب كنيد. اين قسمت انتخاب شده را در فايل جديدي به نام bg.gif ذخيره كنيد. براي كمترين حجم گزينه File > Save For Web را انتخاب كنيد. دقت كنيد حتما ساختار فايل gif باشد تا بتوانيد از آن در Html و CSS استفاده كنيد.
در مرحله بعد بكگراند را مخفي كنيد و فقط container را اتخاب كنيد. براي داشتن صفحه container كامل سه قسمت آن را لازم داريم. قسمت بالايي قسمت پاييني ( كه قوسها را شامل مي شوند ) و قسمت مياني. بايد توجه داشته باشيد كه الگويي كه ساخته ايد هر چند پيكسل دوباره تكرار شده است و بنابر آن بايد عرض قسمت مياني را انتخاب كنيد. به طور مثال در كار من الگوي مورد نظر هر 10 پيكسل تكرار مي شود. پس من عرض قسمت مياني را 10 پيكسل در نظر ميگيرم.
شما بايد سه فايل در اين قسمت ذخيره كنيد. فايلهايي كه نام و اندازه آنها را در تصوير زير مشاهده مي كنيد
شما همينطور بايد header و footer سايت را جدا كنيد و آنها را با اسامي مناسب ذخيره كنيد.
از اينجا به بعد مربوط به مهارت شما در css و html ميشود.
