Вопрос № 45947: Здраствуйте!
Как сделать картинку с прозрачностью?!
И раскажите об оптимизации графики для интернета?!...
Вопрос № 45.947
Здраствуйте!
Как сделать картинку с прозрачностью?!
И раскажите об оптимизации графики для интернета?!
Отправлен: 11.06.2006, 23:07
Вопрос задал: chikanok (статус: 2-ой класс)
Всего ответов: 2 Мини-форум вопроса >>> (сообщений: 0)
Отвечает: Konstantin Boyarko
Здравствуйте, chikanok!
Сделать просто: документ в Фотошопе не должен иметь слоя типа Background, или такого, который бы закрывал собой все полотно (canvas). То есть, изображение может состоять из нескольких слоев но фона быть не должно. Теперь запускаете Save For Web, там выбираете в качестве выходного формата - GIF, и включаете опцию Transparency - сразу видите на превью как картинка стала не фоне шахматки, значит будет сохранено с прозрачностью.
Особенность "прозрачности" в файле формата GIF в том, что только один цвет из 256 возможных может быть объявлен прозрачным, и таким образом полупрозрачные границы изображения, или плавные переходы прозрачности в этом формате сохранить нельзя. То есть, GIF не поддерживает технологии альфа-канала.
Однако есть обход - можно заменить информацию о прозрачности пикселов цветом будущего фона или цветом доминанты будущего фона если он является картинкой, текстурой. Для этого воспользуйтесь функцией Matte - в правом столбце настроек есть список выбора цвета матирования.
Оптимизация цветов зависит от многих условий но сводится к двум критериям: размер файла и степень искажения картинки. Тут нельзя дать однозначных рецептов, а описывать все займет много места, поэтому предлагаю почитать тут: http://www.designhelp.ru/forum/viewtopic.php?t=61 - все об оптимизации и сохранению картинок в формате GIF с прозрачностью на продвинутом уровне.
Разумеется вместо Save For Web вы можете воспользоваться просто диалогом Image > Mode > Indexed Colors, где есть все что нужно для оптимизации и сохранению картинки с прозрачностью.
Однако Save For Web является экспортом, а не сохранением активного документа, что бывает очень удобно для работы - оригинальный документ остается нетронутым.
--------- Where the knowledge grows
Ответ отправил: Konstantin Boyarko (статус: 2-ой класс)
Ответ отправлен: 12.06.2006, 07:51 Оценка за ответ: 5
Отвечает: Shapoklak
Здравствуйте, chikanok!
Константин Боярко у нас эксперт новый, хороший, его ответы профессиональны. Так что мой ответ может, кому-то покажется после его ответа излишним повторением (он все сказал), но, возможно, новичкам будет более понятен и доступен для выполнения мой более примитивный ответ.
Итак, по шагам.
Оптимизации графики для интернета - самые общие моменты.
1. Вся графика должна создаваться с разрешением 72 пикселя на дюйм (это стандартное разрешение экрана, хотя бывает еще 92 dpi).
2. Для дизайна используется палитра web - это для того, чтобы люди на разных компьютерах видели графику именно такой, какой её создал дизайнер. Палитра web стандартная для всех компьютеров. В ней 256 цветов (но можно использовать и меньше).
3. Фотографии и изображения с плавными переходами цветов можно сохранять в формате jpg (хотя при этом Вы не сможете управлять палитрой) или в gif, рисованные изображения - в gif (можно выбирать количество цветов и режимы normal/interlaced - это когда картинка сперва загружается, потом появляется, либо когда она появляется как бы проявляясь по частям (через строку) - это чисто психологическая штучка, чтоб никто не ушел со страницы, не дождавшись появления картинки).
Все это нужно для того, чтобы снизить размер файлов рисунков, и, следовательно, вес страницы, что немаловажно, когда у людей dial-up.
Желательно также просматривать Ваши страницы в разных браузерах (т.к. они по разному отображают html-код) и с разным разрешением экрана (чтобы увидеть, как смотрится Ваша графика, которую используете для оформления).
Не рекомендуются цветовые гаммы, "режущие" глаз, а также такие, которые не могут увидеть дальтоники (для этого можно сделать скриншот экрана, и, поочередно отключая один из каналов - красный, синий, зеленый - убедиться, что при таких преобразованиях и графика, и текст видны). Дальтоники - это не обязательно люди, которые не видят красного цвета, людей с теми или иными отклонениями цветового зрения очень и очень много, ну а мы хотим, чтобы наш сайт мог увидеть каждый, верно?
Теперь о прозрачном фоне.
На примере программы Photoshop.
Итак, создаем рисунок нужного размера (размеры всегда берутся в пикселях, т.к. изображение предназначено для просмотра, а не для печати), с разрешением 72 пикселя на дюйм, с прозрачным (transparent) фоном.
Далее создаете в нем новый слой, на котором рисуете нужное изображение (не закрашивая фон), или вставляете вырезанное из другого файла (предварительно тоже преобразовав его разрешение в 72 dpi).
Потом даете команду Файл - сохранить для Web.
Открывается особое окно. В правой части, в строке Colors вы можете выбирать количество цветов в палитре (совершенно не обязательно сохранять рисунок какого-нибудь элемента, например, четырехцветной кнопки, в палитре 256 - можно вручную поставить 4, будет занимать меньше места) - при этом Вы сразу будете видеть результат, можно остановиться, когда появится потеря цветов.
Чуть левее включаете флажок Transparency
Слева возьмите на панели инструментов Eyedropper Tool и щелкните им в том месте, где будет у Вас прозрачный фон (там, где шахматка - на любом месте). На палитре при этом один из квадратиков цвета пометится как прозрачный - рамочкой. После чего сохраняете (причем Вас предупредят, что файл должен иметь только латинские буквы в названии - но переименовать можно и позже).
Вот и вся механика.
Ответ отправила: Shapoklak (статус: Профессор) Тел.: (3537)255121 Организация: школа 56 г. Орска Адрес: www.geolclub.narod.ru WWW:компьютерные фирмы г. Орска ---- Ответ отправлен: 12.06.2006, 13:37 Оценка за ответ: 5
