Първото нещо което трябва да знаем за картинките е типът на формата използван във WEB. Разполагаме с две стандартни алтернативи за избор: GIF и JPEG. Съществува и трета възможност, най новият формат, известен като PNG. Очаква се той да се превърне във фаворит сред групата формати, но някои по-стари браузъри не работят с него.

Най-важното, което трябва да запомним за употребата на файловите формати е ограничената пропускателна способност на мрежата. Това означава, че ако създадете много красива картинка с големина примерно 1 МВ то потребителите с модемна връзка едва ли ще имат нерви да я изчакат да зареди, а някои потребители с по-бавни модеми може би изобщо няма да успеят и при добро желание. Следователно е добре да създавате файлове с малък размер. Може би максималния файлов размер на картинките не бива да надхвърля 30 - 40 К, това са доста големи картинки (геометричен размер). Ако все пак разполагате с някой голям файл който по някаква причина не желаете да намалите е добре да укажете неговия размер текстово, с обикновен или алтернативен текст. Може също да се сложи по-малко от оригиналното изображение което да бъде връзка към голямото. Важно: малкото изображение трябва наистина да е по-малко, а не само да намалите геометричните му размери на страницата, т.е трябва да го намалите от Image Size на графичната програма която ползвате.

Сега ще се спра на файловите формати за WEB, ще опиша техните особености и начините за оптимизирането им. Всичко което ще бъде споменато за оптимизирането на графиките ще се отнася за Photoshop 5.5. Photoshop е мощна графична програма ориентирана към предпечатната подготовка, но във версия 5.5 е обърнато и голямо внимание на подготовката на графики за WEB. Програмата разполага и с едно приложение ImageReady 2.0, което изцяло е ориентирано към WEB.

JPEG (Joint Photographic Experts Group)

В зависимост от конкретните нужди, JPEG може да се окаже най-подходящия файлов формат. Той е удобен за фотографии и други подобни изображения, като основната причина за това е възможността му да поддържа 16 милиона цвята. JPEG подържа дълбочина на информацията за цветовете, но използва схема на компресия на информацията със загуби, която позволява да намалите размера на файла, и това е цената която се плаща за качеството на изображението относно цветовете. За да съхраните файл в JPEG е нужно да работите в режим RGB на Photoshop, тъй като този режим се използва за представяне на информацията на монитора. Как става самото съхраняване? Можете да го направите по два начина.
1. По стандартния за всяка графична програма File>Save As избирате от менюто JPEG задавате степен на компресия, във Photoshop степените се виждат с числа и със думи, от ниско качество през средно до високо качество. За WEB върши работа качество около средното. Има една подробност, тъй като екранната разделителна способност е 72 dpi вашата картинка трябва да бъде с такава разделителна способност. Разделителната способност се променя от Image -> Image Size, имайте в предвид, че като намалите разделителната способност размерите на картинката също се намаляват. Обърнете внимание на раздела Format Options, който се намира в долния край на прозореца JPEG Options, Baseline (Standart) опцията по подразбиране. Baseline(Optimized), чрез тази опция се извършва оптимизиране на цветовете на файла, като в повечето случаи размера на файла е по малък от този при който е използван Standart. Progressive наименованието му подсказва, че се отваря бързо в браузъра с влошено качество и на няколко паса едновременно с изтеглянето на файла изображението се доизглажда. Изскачащото меню се активира само след включването на тази опция, можете да изберете 3, 4 или 5 паса.
2. Друг начин за съхраняване е File>Save for Web, тук програмата сама оптимизира файла, вие задавате само степента на компресия и в прозореца можете да наблюдавате промените. В този случай програмата запазва ширината и височината на картинката непроменени. От същия прозорец можете да промените и размера на картинката. Програмата сама променя разделителната способност на 72 dpi.

GIF (Graphic Interchange Format)

Това е следващия формат за създаване на файлове за WEB. Поради способността му да поддържа само 256 цвята, възможностите му са значително ограничени в цветово отношение в сравнение с JPEG. За сметка на това при формата GIF могат да се съхраняват файлове с прозрачен фон, което е много полезно при създаване на бутони и други подобни елементи. Тъй като Photoshop позволява използването само на правоъгълно платно за рисуване, ако бутона не се запомни като прозрачен GIF и се постави на страница с тъмен фон, около него ще се получи светла ивица. Ако съхраните един GIF чрез командата Save As няма да получите прозрачни пиксели тъй като при нея се използува версията GIF87а, която не поддържа прозрачност, ако искате да запазите файл в този формат, но подържащ прозрачност трябва да използвате командата File>Export. Тук се използва версията GIF89а която поддържа прозрачност. Има и едно ограничение - предварително файла трябва да е в режим Indexed Color, избира се от Image -> Mode -> Indexed Color. Кутията GIF Options е максимално опростена - от зоната Row Order начина на изобразяване на файла в браузъра (наведнъж или презредово), опциите са Normal и Interlaced. Във Photoshop 5.5 има още една възможност за запомняне на прозрачен GIF (може би най-удобната). При нея файла не е задължително да е в Indexed Color, може и да е в RGB, това става от Help -> Export Transparent Image, следвайте инструкциите и нещата стават бързо и лесно. Опцията не съществува във версиите преди Photoshop 5.5.

Форматът GIF подържа и анимация, така чрез него можете да създадете и движещи се картинки. За тази цел можете да използвате ImageReady 2.0. Накратко възможностите и ще бъдат показани с няколко примера. Най-напред изберете Window -> Show Animation, показва се прозорец за създаване на анимация.

• Пример 1. Текстът е създаден по следния начин: всяка буква е в отделен слой, след създаването и подреждането на текста изключвате всички слоеве( от окото пред слоя) с изключение на първия - първата буква се вижда във първия кадър, след това от малката стрелкичка горе в дясно на прозореца за анимация избирате New Frame, гасите първия слой и включвате втория, вече втората буква е във втория кадър, така продължавате докато свършат буквите. След това от бутоните под прозореца проверявате анимацията. От стрелката долу в ляво можете да зададете дали анимацията да се движи постоянно или само един път. Под всеки кадър можете да зададете колко време да се задържа на екрана.

• Пример 2

• Пример 3

• Пример 4 Примери 2, 3, и 4 са създадени със вградените ефекти на ImageReady, които се избират от палитрата Actions, след като изберете нужния ви ефект от бутона Play в долния край на палитрата създавате анимацията и тя се появява в прозореца за анимация. По същия начин, като по-горе задавате еднократно или постоянно да се движи анимацията и времето на всеки кадър. По същия начин можете да създавате банери и други прости (може и сложни) анимации.

Готовия файл се запомня от File -> Save Optimized As, ако желаете файла да има прозрачен фон, при отваряне на платното за рисуване трябва да сте избрали от секцията Contents of First Layer радио бутона Transparent.

Ако някой иска да напише нещо по друга тема да пише на Филип. Ако имате въпроси по темата пишете на Христо Перчинков

Заб. - примерните картинки са създадени от Хр. Перчинков и оптимизирани от Ф. Дудин

Назад