Онлайн учебник по WEB-графике

Графика на вашей интернет-странице

FAQ по графике

• Какой графический формат (GIF или JPEG) лучше использовать для графики в веб и почему?
• Какое ПО лучше использовать при создании графики для веб?
• Как лучше оптимизировать графику для использования в веб?
• Как убрать "растр" со сканированных изображений?
• Как "разрезать" картинку на части?
• Как из картинки выполненной в градациях серого получить цветную?
• Сколько памяти выделять Фотошопу для нормальной работы и почему?

• Как изменить шрифты интерфейса Фотошопа на русские?
• Как создать эффект "старой" фотографии в Фотошопе?
• Как можно расположить текст по кривой в Фотошопе?
• Каким образом можно заставить Фотошоп автоматически обработать несколько картинок (например изменить их размер)?
• Как сделать в Фотошопе, чтобы одна картинка плавно переходила в другую?
• Как лучше резать Фотошопом картинки для вебдизайна?

Q. Какой графический формат (GIF или JPEG) лучше использовать для графики в веб и почему?

A. Если ваша картинка содержит немного цветов и/или четкие линии - лучше использовать GIF т.к. его палитра может быть только в пределах 256 цветов и в нем применяется алгоритм сжатьия без потери качества изображения (конкретно, алгоритм LZW). Так же GIF допускает создание прозрачных областей и анимации. В отличие от него, JPEG используется при работе в фотографиями и сложными коллажами содержащими большое количество цветов и цветовых переходов (градиентов). Достоинствами этого формата являются глубина цвета True Color и небольшой размер выходного файла. К недостаткам можно отнести алгоритм компрессии с потерями качества, невозможность задания прозрачных областей и невозможность создания анимации.

Q. Какое ПО лучше использовать при создании графики для веб?

A. Однозначного рецепта здесь дать невозможно т.к. многое в этом вопросе зависит от предпочтений конкретного дизайнера. В данный момент для работы с растром основная масса дизайнеров используют Adobe Photoshop (http://www.adobe.com), Corel Photopaint (http://www.corel.com) или Ulead Photo Impact (http://www.ulead.com). Для работы с векторной графикой Adobe Illustrator (http://www.adobe.com), Corel Draw (http://www.corel.com) или Macromedia Freehand (http://www.macromedia.com).

Q. Как лучше оптимизировать графику для использования в веб?

A. Для этой цели можно использовать как стандартные средства графических пакетов (Photoshop, Photopaint и т.д.), так и специальное ПО. К такому ПО можно отнести Ulead Smart Saver (http://www.ulead.com), Adobe Image Ready (http://www.adobe.com) и некоторые другие. Так же можно использовать специальные он-лайн сервисы, например, http://www.gifwizard.com/

Q. Как убрать "растр" со сканированных изображений?

A. Лучше сканировать изображение с большим разрешением чем будет иметь изображение на выходе, причем, разрешение не должнобыть кратным разрешению ПЗС-матрицы сканера, например, 310 dpi. В Adobe Photoshop можно сделать следующие действия со сканированным изображением. Filter -> Noise -> Despeckle -> Gaussian Blur (0.5-1) -> создать копию текущего слоя -> к копии применить Gaussian Blur (2-5) -> установить степень непрозрачности слоя-копии в 20-40%.

Q. Как "разрезать" картинку на части?

A. Для этой цели можно использовать как стандартные средства графических пакетов (Photoshop, Photopaint и т.д.), так и специальное ПО. К такому ПО можно отнести Ulead Web Razor (http://www.ulead.com), The Castle's SplitImage (http://www.thecastle.com), Macromedia Fireworks (http://www.macromedia.com) и некоторые другие.

Q. Как из картинки выполненной в градациях серого получить цветную?

A. В Adobe Photoshop можно сделать следующее. Перевести изобрадение в режим RGB. Создать копию текущего рабочего слоя и выставить аттрибут наложения Lighten. Дальше можно идти одним из двух путей (хотя можно и попытаться сочитать их). Во-первых, можно просто нарисовать на новом слое нужные цветовые области. Во-вторых, поиграться с фильтрами из раздела меню Image -> Adjust (Hue Saturation -> Colorise, Color Balance, Selective Color).

Q. Сколько памяти выделять Фотошопу для нормальной работы и почему?

A. Если вы работаете с графикой для web (обычно, она небольшого размера) - целесообразно ставить 50% или около того, чтобы иметь возможность без проблем работать одновременно и с другими приложениями (например, HTML редактор, FTP клиент и/или что-то другое). Если же вы работаете с файлами большого размера - советую выставить 80%-90%.

Q. Как изменить шрифты интерфейса Фотошопа на русские?

A. Найдите ADMUI2.fon в директории PhotoShop'a и удалите его. При запуске PS подставится системный кириллический шрифт (например, MS Sans Serif ets).

Q. Как создать эффект "старой" фотографии в Фотошопе?

A. Воспользуйтесь плагином Aged Film

Q. Как можно расположить текст по кривой в Фотошопе?

A. Стандартными средствами этого сделать невозможно. Воспользуйтесь плагином Extensis PhotoGraphics

Q. Каким образом можно заставить Фотошоп автоматически обработать несколько картинок (например изменить их размер)?

A. Создаете Action в который записываешь нужную последовательность действий (в данном случае изменение размера картинки). Дальше File -> Automate -> Batch. В секции Play выбираете свой Action. В секции Source - путь директории откуда беруться исходники. В секции Destination - куда сохранять результаты.

Q. Как сделать в Фотошопе, чтобы одна картинка плавно переходила в другую?

A. Выбираем слой который должен плавно переходить -> Edit in Quick Mask Mode (Q) -> Заливаем все черным цветом (картинка станет розоватой) -> Делаем градиен то черного к белому (черный - непрозрачность, белый - прозрачность) -> возвращаемся в Edit in Standart Mode (Q) -> Edit -> Clear (или просто DEL).

Q. Как лучше резать Фотошопом картинки для вебдизайна?

A. Ставим Guidelines в нужное положение (нажать левую кнопку мыши на "линейке" и тянуть не отпуская), устанавливаем режим "прилипания" к ним (View -> Snap to Guides) -> Image -> Mode -> Indexed Color, выделяем нужный участок карники, CTRL+C -> CTRL+N -> Enter -> CRTL+V -> File -> Export - GIF 89A Export.