طراحی یک صفحه وب در فتوشاپ

 

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

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

در وهله اول مراحلی که در طراحی اولیه
یک سایت باید مد نظر قرار داد را بررسی می کنیم . شروع کار
طراحی سایت وب از طریق انجام کار اولیه بر روی یک تصویر در
برخی موارد آسان تر از سایر روش هاست .بدین منظور :

1-  ابتدا برنامه فتوشاپ را اجرا کرده
و سپس فایلی را که قصد استفاده از آن به عنوان صفحه اصلی سایت
تان دارید را انتخاب کنید.

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

3- مرحله بعد  ایجاد سندی است که کد های HTML
مربوطه بر اساس تکه های موجود در آن ایجاد
می شوند و در نتیجه در وب سایت قابل
استفاده خواهند بود.

برای آسان تر شدن کار می توانید فایل
مورد نیاز که در این قسمت بر روی آن کار خواهیم کرد را 

با کلیک در اینجا بر روی سیستم خود دریافت و ذخیره کنید.

 

1- رابط
ایجاد کننده تصویر

 

1-1
رابط طراحی

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



2-1 برنامه ریزی اولیه

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



3-1 طرح بندی

شروع کار ما با صفحه ای در ابعاد
740*460  پیکسل می باشد . در این فضا  سرصفحه ، محیط
های مرور و محیط های مفاهیم مورد نیاز را قرار
خواهیم داد.

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

بعد از ایحاد تصویر در فتوشاپ زمان آماده کردن هر بخش جهت
استفاده در یک سند HTML است.

 

2-
تکه کردن تصویر

هر چند برای ایجاد تصاویر گرافیکی می توانید از نرم
افزارهای مختلفی استفاده کنید ، اما
توصیه من به شما استفاده از نرم افزار فتوشاپ می باشد . در
کنار فتوشاپ برنامه دیگری به نام ImageReady قرار دارد که شما
می توانید برای ذخیره تصاویر مناسب در وب ، ایجاد تصاویر
انیمیشن Gif ، و برش تصاویر موجود در فتوشاپ از
آن استفاده کنید . تکه کردن در واقع به
این مفهوم اشاره دارد که ما تصویر مربوط به محیط اصلی را گرفته
و آن را به بخش های کوچک تر تقسیم کنیم و پس از آن به راحتی هر
بخش را در یک جدول HTML وارد می کنیم .



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

همانطور که در این مثال مشاهده می کنید ، هنگام تقسیم و برش یک
تصویر بزرگ امکان بهینه سازی جداگانه هر بخش برای کم کردن حجم
نهایی فایل وجود دارد . همچنین برخی از تکه ها در بخش های
مختلف تکرار شده اند و به همین دلیل می توانید از یک تصویر به
جای همه آنها استفاده کنید . نمونه تصویری که من با این فایل
ایجاد کرده ام تنها 26.1k حجم داشته است . در واقع کاربری که
از مودم 28.8k استفاده می کند تنها نیاز به 9 ثانیه زمان برای
بارگذاری صفحه دارد .

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



 

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

در مرحله بعد تصویر تان را به داخل برنامه ImageReady منتقل
کرده و گزینه Slices را از منو انتخاب کنید . در منوی
مربوطه  گزینه Create Slices from
Guides را انتخاب کنید . طرح شما باید مطابق شکل زیر باشد.

توجه داشته باشید که تمامی خطوط
راهنمای ایجاد شده دارای شماره منحصری هستند. این نام گذاری بر
مبنای پیش فرضی است که در برنامه ImageReady وجود دارد .

حال که تکه های تصویر خود را ایجاد کردید در کادر محاوره ای
گزینه Show Slices را انتخاب کنید. من چیزی شبیه به طرح زیر را
مشاهده کردم :

در این مرحله سه
تکه  را با هم ترکیب کرده و آنها را
با یک عنوان نام گذاری می کنیم .
بدین منظور گزینه Slice Selection Tool
را انتخاب کنید . دو خط راهنمای عمودی قسمت سر صفحه را به سه
قسمت تقسیم می کنند . و ما قصد داریم تا سر صفحه را به یک تکه
تصویر تبدیل کنیم.

پس از انتخاب گزینه Slice Selection Tool در بالای گوشه سمت چپ
تکه شماره 01 کلیک کنید. سپس کلید Shift را پائین نگه دارید و
در تکه های 02 و 03 نیز کلیک کنید. سپس در تکه وسطی راست کلیک
کرده و از کادر محاوره ای نمایان شده گزینه Combine Slices را
انتخاب کنید.

اکنون طرح شما باید به شکل زیر تبدیل
شده باشد :

 

سه تکه بالایی در این مرحله به یک بخش
تقسیم شده اند و با یک حاشیه زرد رنگ مشخص شده اند . برای نام
گذاری تکه به کادر محاوره ای Show Slices بروید . در فیلد name
کلمه header را وارد کنید. و این کار را برای محیط پاصفحه نیز
تکرار کنید و آن را footer نام گذاری کنید.

هنوز تکه هایی وجود دارند که به نام گذاری نیاز دارند . در
پائین سر صفحه و در سمت چپ آن باید تکه شماره 02 را مشاهده
کنید- یک مربع کوچک آبی رنگ . از آنجا که ابعاد
این تکه با ابعاد بخش های شماره 04، 08 و 10 مساوی هستند تنها
یکی از آنها را ذخیره می کنیم. در حالیکه ابزار تصویر Slice
Selection Tool فعال است در تکه شماره 02 کلیک کرده و نام
blue_square را به آن بدهید. سپس در تکه شماره 05 کلیک کرده و
نام gray_bar را به آن بدهید. اگر دقت کنید متوجه متناسب بودن
ابعاد این قسمت با تکه شماره 07 خواهید شد. از این رو تنها
نیاز به ذخیره همین قسمت خواهید داشت.



 بهینه
سازی و ایجاد فایل خروجی

در این قسمت اقدام به بهینه سازی و سپس ایجاد فایل
خروجی مناسب برای وب خواهیم کرد. برای انتخاب تکه gray_bar از
ابزار Slice Selection Tool استفاده کنید . کلید Shift را
پائین نگه داشته و در تکه blue_square کلیک کنید. از آنجا که
از لحاظ رنگ بندی هر دو این قسمت ها یکسان هستند می توان در یک
مرحله هر دو قسمت را بهینه سازی کرد. از تنظیمات برای بهینه
سازی هر دو تکه بصورت یک فایل Gif استفاده کنید:

سپس از ابزار Slice Selection Tool
برای انتخاب سرصفحه استفاده کنید و در حالیکه کلید Shift را
پائین نگه داشته اید قسمت پاصفحه را نیز انتخاب کنید. از آنجا
که رنگ بندی این قسمت ها دارای ویژگی پیچیده تری است بهتر است
این قسمت ها را در حالت jpeg ذخیره کنید .

برای ایجاد فایل خروجی ابزار Slice
Selection Tool را انتخاب کرده و سپس تکه های header, footer,
blue_square و gray_bar را انتخاب کنید:

در منوی فایل گزینه Save Optimized As
را انتخاب نمائید.

گزینه هایی که در این قسمت وجود دارند
عبارتند از :

1- انتخا ب مقصد و محل ذخیره فایل ها و پوشه ها

2- در قسمت های مربوطه می توانید تعیین کنید که فایل تنها
بصورت HTML ذخیره شود و صفحه html ای ایجاد کند که کاملا با
طرح بندی شما متناسب باشد.

3- گزینه سوم – ذخیره تصایر انتخاب شده- را نیز انتخاب کنید.


در کادر محاوره ای Save as type گزینه Images Only را انتخاب
کرده و سپس در زیر آن گزینه Selected Slices را انتخاب کنید.
بصورت پیش فرض برنامه ImageReady تمامی تصاویر انتخاب شده را
در یک پوشه ذخیره می کند. در صورتی که قصد چنین کاری را ندارید
می توانید در کادر Output Settings کلیک کرده و در بخش پائینی
کادر محاوره ای گزینه Put images in folder را غیر انتخاب
کنید. البته بهتر است قبل از ایجاد تکه های مربوطه پوشه ای
برای فایلهای اصلی و در آن پوشه نیز زیرپوشه های مورد نیاز تان
را ایجاد کنید. در این حالت به راحتی می توانید هر تصویر را در
پوشه مورد نظرتان ذخیره کنید. پس از انتخاب موقعیت ذخیره فایل
ها گزینه Save را کلیک کنید.

 

مرحله بعد ایجاد صفحه HTML ای است که
از آن به عنوان الگویی در وب سایت خود استفاده می کنیم . نگران
بخش های ذخیره نشده در فایل نباشیدو بخش مرکزی تصویر در
بردارنده مفاهیم و محتوای سایت است .

 

3- قرار دادن تصاویر تکه شده در فایل
HTML



برای ایجاد الگوی مورد نظر در این مرحله تصاویر مان را در داخل
سند HTML قرار می دهیم :

1- جدولی با پنج ردیف و 3 ستون ایجاد کنید.دقت
کنید تا کد