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

amirpetrucci0261

کاربر طلایی1

تاریخ عضویت : تیر 1388

تعداد پست ها : 27726

محل سکونت : http://zoomstar.ir/

ساختن یك وب سایت با فتوشاپ
پنج شنبه 11 آذر 1389 12:57 AM

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

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

قدم دوم:
اجاز دهید تا كار را آغار كنیم.قبل از هرچیز شما به یك طرح رنگ داشته باشید. این یك اشتاه بزرگی است كه رنگها را بطور تصادفی انتخاب كنید و ببینید كدام یك به كار شما بیشتر می نشیند. دو برنامه مورد علاقه من در طراحی ها برنامه 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

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

درس دوم

قدم ششم:
حالا وقت آن است كه كانتینر را شروع كنیم. كانتینر لایه ای است كه همه محتوای صفحه وب ما در آن قرار خواهد گرفت. یك لایه جدید با همین نام ایجاد كنید. ابزار مستطیل لبه گرد (Rounded Rectangle Tool )را انتخاب كنید. ( با shortcut U ) مقدار شعاع را از منوی بالا هر مقدار كه مایلید می توانید اختیار كنید. هر چه عدد بالاتر باشد قوس بیشتری خواهید داشت من Radius را برابر 15 انتخاب میكنم. هر رنگی را كه مایلید صفحه وب شما داشته باشد را انتخاب كنید. من رنگ سفید تیره را انتخاب كرده ام. سپس از بیرونی ترین خطوط راهنما شروع به ترسیم مستطیل بكنید. اگر شما همه مراحل قبل را درست انجام داده باشید به طور اتوماتیك این مستطیل به خطوط راهنما خواهد چسبید (snap) می توانید از بافتها و فیلترهای مختلفی روی كار استفاده كنید تا شكل جالبتری داشته باشید. این آموزش به نحوه ساختن این فیلترها نخواهد پرداخت.( من از فیلتر rough Pastels استفاده كردم با كمی افكت)

قدم هفتم:
حال قسمت Header سایت را آماده میكنیم. یك لایه جدید با همین نام ایجاد كنید. ابزار مستطیل لبه گرد را دوباره انتخاب كنید. این بار شعاع 7 را انتخاب كرده ام. مانند شكل یك مستطیل می كشیم و افكت 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 پیكسل در نظر میگیرم.
شما باید سه فایل در این قسمت ذخیره كنید.