برش طرح ( برش دادن تصاویر برای استفاده در کد ها و صفحات وب )

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

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

مرحله سیزدهم – ابزار برش :

در این مرحله می توان از ابزار Slice و Crop برای برش دادن تصاویر استفاده کرد و نوع برش تصاویر بسیار مهم است.

Header

Footer

برای برش تصاویر در قسمتهای Footer و button نیز از همین روش برای برش استفاده می شود. استفاده از این روش باعث کم شدن حجم تصاویر مورد استفاده در صفحه وب و در نتیجه حجم پایین صفحه وب و لود شدن سریع تر صفحه وب می شود.

Button

مرحله چهاردهم – ذخیره تصاویر برای وب سایت :

با استفاده از Save For Web برش ها را طبق تصویر ذخیره می کنیم .معمولاً از فرمت Png 24 برای ذخیره تصاویر استفاده می کنیم.

پس از تنظیمات و انتخاب محل ذخیره سازی تصاویر آنها را ذخیره کنید. “images only”, “default settings”, and “selected slices only.”

آیکون ها و لوگو نیز طبق تصاویر زیر و با استفاده از روش مشابه به صورت مجزا ذخیره می شوند.برای ذخیره سازی و برش لوگو و آیکون ها بقیه اجزاء در طرح فتوشاپی غیر فعال شده اند و طبق تصاویر Background به صورت Transparent در آمده است. استفاده از فرمت png با پس زمینه Transparent مشکلات و مزایای مختلفی دارد.این تصاویر در Browser های FireFox به صورت Transparent نمایش داده می شوند و اما در IE نمایش آنها با مشکلاتی همراه است که البته با استفاده از چند Script قابل حل است .

مرحله پانزدهم – نامگذاری :

تصاویر اضافی حذف می شوند و نامهای مناسبی برای قطعات برش داده شده انتخاب می شوند. انتخاب نامهای مناسب در راحتی و استاندارد کار شما بسیار تاثیر گذار هستند……..