برای ايجاد يک سايت اينترنتی پس از تعيين هدف و ساختار کلی تا پيادهسازی نهايی و آپلود کردن آن در سايت، چندين مرحله بايد طی شود، اما يکی از اين مراحل، طراحی يک رابط گرافیگی (قالب) زيبا و جذاب و در عين حال سبک برای نگهداشتن بيننده است.
رابط گرافيکی صفحات وب به اين دليل بايد سبک باشد که بيننده نبايد برای ديدن صفحه وب شما معطل شود. البته امروزه در برخی از سايتهای خارجی با توجه به مخاطبان آنها که اکثراً از اينترنتهای پرسرعت استفاده میکنند، حتی از انيميشنهای طولانی و پرحجم فلش نيز استفاده میشود. اما متاسفانه در کشور ما هنوز اينترنت پرسرعت همهگير نشده است. بنابراين لازم است که رعايت حال بيننده خود را بکنيد. وقتی پای طراحی گرافيکی صفحات به ميان میآيد، يکی از نرمافزارهایی که در اين زمينه حرف اول را میزند فتوشاپ است. همانطور که میدانيد اين امکان در Image Ready قرار داشت اما از CS2، در خود فتوشاپ میتوانيد از امکانات Image Ready استفاده نماييد.
طبيعتاً وقتی برای وب طراحی میکنيد. يک صفحه کامل را با تمامی عناصر آن در نظر گرفته و طرح خود را ايجاد میکنيد. اما مساله اينجاست که در وب صفحه شما بايد به قطعات کوچکتری که هر کدام کارآيی خاص خود را دارد جدا شود.
در برخی قسمتهای صفحه شما متن قرار میگيرد که آن قسمتها بايد بتواند مجزا از ساير قسمتها باشد. ممکن است در بعضی قسمتها رنگ يکنواختی را به کار برده باشيد. پس برای کم کردن حجم صفحات نبايد برای آن قسمت از صفحه از يک تصوير استفاده کنيد. بلکه بايد از قابليتهای HTML برای ايجاد يک خانه جدول رنگی استفاده کنيد. همينطور اگر در قسمتهايی از صفحه يک الگوی تصويری تکراری وجود دارد. بهتر است فقط آن الگو را به صورت يک فايل تصويری به صفحه وب خود بدهيد و در طراحی HTML آن صفحه، آن تصوير را تکرار کنيد.
ابزار Slice
ابزار Slice که در جعبه ابزار فتوشاپ قرار دارد. مخصوص قطعه، قطعه کردن طرح شما است بعد از اينکه صفحه وب خود را به طور کامل طراحی کرديد. بايد با استفاده از اين ابزار به طور هوشمندانه، طرح خود را به قطعات مناسبی تقسيم کنيد. البته برای تقسيم قطعات، بهتر است بدانيد که چگونه میخواهيد از اين قطعات در صفحات HTML خود استفاده کنيد. و طبيعتا لازمه آن دانستن چگونگی ايجاد صفحات وب است که در اين مقاله نمیگنجد. در اينجا فقط قصد دارم به طور مختصر چگونگی کار اين ابزار را در فتوشاپ برای شما توضيح دهم.
بعد از اينکه طرح خود را با استفاده از اين ابزار به قطعات مشخصی تقسيم کرديد. میتوانيد با استفاده از همين ابزار بر روی هر قطعه دابل کليک کنيد تا در پنجره Slice Option مشخصات آن قطعه را مشاهده کنيد يا تغيير دهيد. در ليست Slice Type در پنجره Slice Option، نوع قطعه را تعيين میکنيد. اگر میخواهيد يک خانه خالی در صفحه وب خود در آن قطعه داشته باشيد، بايد No lmage را انتخاب کنيد. در همين پنجره در قسمت Name، نام آن قطعه را نيز تعيين میکنيد. فتوشاپ از اين نام برای نامگذاری فايلهای تصويری که برای صفحات شما ايجاد میکند، استفاده خواهد کرد اگر میخواهيد تصوير آن قسمت از صفحه شما، به صورت يک لينک برای صفحات ديگر باشد، يعنی بتوانيد با کليک بر روی آن به صفحه ديگری برويد. بايد در قسمت URL، آدرس آن صفحه را وارد کنيد.
اگر بخواهيد میتوانيد ابعاد قطعه مورد نظر خود را به طور دقيق در قسمت Dimensions تغيير دهيد و در قسمت Slice Background Type نوع پس زمينه قطعه را مشخص میکنيد. اگر در فتوشاپ لايه Background نداشته باشيد و قسمتهايی از قطعه شما شفاف باشد. انتخاب None از اين ليست، باعث میشود که تصويری با پس زمينه شفاف، برای قطعه شما ايجاد شود در غير اين صورت بسته به گزينهای که انتخاب میکنيد، يک پس زمينه رنگی جايگزين نقاط شفاف و نيمه شفاف تصوير شما خواهد شد البته اين به شرطی است که فرمت مناسبی را برای آن قطعه در هنگام ايجاد صفحه وب انتخاب کنيد که در زير راجع به آن توضيح خواهم داد.
بعد از اينکه گزينههای مربوط به همه قطعات طرح خود را تنظيم کرديد. بايد از منوی File گزينه Save for Web and Devices را انتخاب کنيد. در پنجرهای که باز خواهد شد گزينههای بيشتری برای هر کدام از قطعات خود خواهيد داشت. با ابزار Slice Select میتوانيد يک يا چند قطعه را با گرفتن کليد Shift انتخاب کنيد و در سمت راست صفحه فرمت فايل خروجی مربوط به آن قطعه يا قطعات را تعيين کنيد. صفحات وب سه فرمت GIF، JPEG، و PNG را میتوانند در خود داشته باشند. هر کدام از اين فرمتها ويژگیهای خود را دارند و بايد در جای مناسب خود استفاده شوند تا صفحه وب شما حجم کمتر و کيفيت بهتری داشته باشد.
در پنجره Save For Web and Devices فرمت WBMP را نيز میتوانيد برای قطعات خود انتخاب کنيد که يک فرمت تک رنگ مخصوص گوشیهای تلفن همراه است.
بعد از اينکه فرمت هر يک از قطعات تصويری خود را انتخاب کرديد با کليک روی دکمه Save، نام و مکان فايلهای خروجی خود را تعيين میکنيد. اگر نوع خروجی خود را در ليست Save as type ، HTML and Image ، و All Slices را از ليست Slices انتخاب کرده باشيد. يک فايل HTML و يک دايرکتوری شامل قطعات تصويری شما که در اين فايل HTML به کار رفتهاند، ايجاد خواهد شد. البته میتوانيد با تغيير اين گزينهها، فقط فايل تصويری قطعات انتخابی يا فقط HTML را ايجاد کنيد.
