Вы нарисовали макет своего сайта. Отлично! Теперь нужно его сверстать. Прежде, чем это делать, нужно спланировать его табличную структуру. (Или любую другую, в зависимости от типа верстки, принципы здесь одни и те-же.)
По принятой ранее традиции, эта статья разбита на подразделы, так как материал получился объемным. Итак, начнем…
Макет, таблицы, типы графики, масштабируемая верстка
Для примера, я нарисовал макет несуществующего сайта, который продает… Какие-то железки. Неважно, в общем.
Задача следующая: разрезать этот макет на кусочки и сохранить с оптимизацией для дальнейшей верстки, притом, средняя часть должна масштабироваться, пропорционально с текстом. Так как картинки бывают только прямоугольной формы, придется резать макет на квадратики и прямоугольники. У меня получилось так:
Почему остались пустые области, в том числе, содержащие картинки и текст? Потому что, текст у нас вводится потом, при верстке, фон справа и тот, который под текстом, делается просто заливкой цветом ячейки таблицы, тоже при верстке. А мелкие фотографии в середине текста делаются в отдельном файле, это мы рассмотрим в конце.
Чтобы точно соблюсти размеры, воспользуемся направляющими (Guides). Для установки направляющей в Photoshop, нужно в меню View выбрать New Guide, потом выбрать тип направляющей (горизонтальную или вертикальную) и ввести ее координату, относительно нуля. Но я делаю проще. Для этого надо включить линейки, командой CTRL+R, а затем с нужной линейки вытянуть направляющую. С направляющими, наша схема разделки туши, выглядит несколько иначе. Надеюсь, понимаете, почему…
Далее, схема работы такая: чтобы не мучиться с каждой картинкой по отдельности, воспользуемся прекрасной возможность Photoshop, резать макеты автоматически. Для этого там существуют слайсы (Slices).
Берем в руки инструмент Slice Tool и начинаем строить квадратики, в соответствии с нашим первоначальным вариантом резки. Есть еще вариант, как только вы выбрали инструмент Slice, на верхней панели свойств инструмента -
можно нажать эту кнопку и слайсы создадутся автоматически, в соответствии с вашими направляющими. Однако, получилось их больше, чем ожидалось, поэтому, лишние, желательно удалить, а оставшиеся растянуть до нужных размеров. В итоге, должно получится что-то такое:
Слайсы, которые вы удалили, перестали существовать и стали виртуальными, о чем свидетельствуют серые ярлычки, на тех местах, где они были. В принципе, их всегда можно вернуть, но нам это не требуется.
Итак, у нас есть все те-же 6 картинок, которые надо оптимизировать. На слайсах они имеют номера: 1,2,3 и 6,7,8. Прошу обратить внимание на номера 2 и 7. Именно в этом месте, по заданию, наша страница должна масштабироваться. Сделать это можно, растягивая картинки по горизонтали. С нижней частью все нормально, там будет текст, а, вот, с верхом проблемы. Там у нас текст, который невозможно сделать текстом, его тоже надо делать картинкой. Но это тоже потом, сначала разберемся с остальным.
У нас все готово, можно сохранять. Нажимаем сочетание клавиш CTRL+ALT+SHIFT+S и попадаем в окно сохранения для WEB. Тут мы видим все наши слайсы и можем установить для них параметры сохранения. И тут, как раз, следующая глава…
JPEG. Оптимизация
Слайсы номер 1 и 6 содержат полноцветную графику, поэтому, сохранять мы их будем в форматеJPEG. Щелкните по слайсу номер 1 и теперь обратимся к панели оптимизации. Выглядит она так:
Следите за цифрами:
1. Выберите, на местной панели инструментов, инструмент Slice Select Tool, для того, чтобы выделять слайсы.
2. Убедитесь, что активна вкладка Optimized. Это значит, что вы видите изображение уже после оптимизации, то есть таким, каким оно будет сохранено.
3. В селекторе выбора типа графики, выберите JPEG. Появятся настройки оптимизации. Нам тут нужен только параметр -
4. Quality. Он отвечает за компрессию, а значит и за качество. Чем больше значение этого ползунка, тем выше качество — меньше компрессия — больше вес картинки.
Инструментом Slice Select Tool выделите слайс номер 1. Теперь установите ползунок Quality на 100 и начинайте потихоньку уменьшать это значение, внимательно глядя на картинку. Как только качество начнет заметно ухудшаться, немного увеличьте это значение, чтобы картинка опять стала нормальной. Вот и все. Один слайс мы оптимизировали.
Наверное, стоит немного рассказать, каким образом ухудшается качество при JPEG-сжатии. Дело в том, что небольшие изменения в качестве, во время оптимизации, возможно, обычному глазу и не заметны. Но они есть. Главным образом они проявляются на резких границах между цветами. В меньшей степени их можно заметить на слошных заливках. Внимательно следите за этим. Не стоит оставлять большое качество, так как это увеличит вес картинок, но и сильно прижимать их тоже не стоит.
Теперь выделяем слайс номер 6 и делаем то же самое. Тут у нас тоже полноцветная графика, поскольку это фотография.
А сейчас займемся растягивающимися картинками. И тут опять новая глава…
GIF. Оптимизация, палитра цветов
Слайсы номер 2 и 7 нужно сохранить в формате GIF по нескольким причинам. Во-первых, чтобы растягивать изображение, оно должно быть 1 пиксель в ширину. Если ширина будет больше, например 2 или больше, там может остаться паразитный пиксель, немного другого цвета, тогда конечное, растянутое изображение будет рябить. Да и 1 пиксель весит меньше, чем 2, как раз, в два раза. Во-вторых, если сохранять это дело, в формате JPEG, мы получим искажения в цветах из-за алгоритма компрессии.
А формат GIF позволяет сохранить небольшие (да и большие тоже) изображения с изначально малым количеством цветов, вообще без потерь. Это возможно за счет использования специальной палитры цветов, которая может содержать их, максимум 256. В нашем случае, получаются картинки с размерами, примерно 1×50 пикселей. И цветов там не больше количества пикселей по высоте.
GIF. «Резина»
Но, прежде, чем сохранять, нужно сделать слайсы необходимой ширины. закрываем окно, кнопкой Done. Это сохранит изменения.
Теперь, уменьшаем слайсы 2 и 7 до одного пикселя по ширине, отключив лишние объекты, чтобы остался только градиент и возвращаемся в панель оптимизации и сохранения. Не забыли? CTRL+ALT+SHIFT+S
Выделяем слайс номер 2 и переключаем в панели свойств, формат на GIF. Теперь по порядку:
1. Это формат GIF, который мы только что выбрали.
2. Мы можем принудительно установить количество цветов в выходном файле. В данном случае, я поставил их на максимум.
3. А это и есть та самая палитра цветов.
4. А это реальное количество цветов в картинке. Если оно меньше того, что установлено в пункте 2, значит больше их там просто нет. И это замечательно.
5. Тут пишется информация о формате и весе картинки. GIF — это GIF, 273 байта — это вес нашей картинки. Ниже подсчитано примерное время загрузки, при текущей скорости соединения.
1 секунда — конечно много, но меньше он не умеет показывать. На самом деле, картинка загрузится гораздо быстрее.
После установки параметров нажимайте кнопку Done, нам пока рано сохранять картинки, а изменения в настройках, сохранить не помешает.
Чуть не забыл, у нас же еще остались уголки! На нашем генеральном плане, он же схема разделки туши макета, они обозначены номерами 3 и 8.
(Смотрите их на одной из первых картинок, потому что, после изменения размеров слайсов 2 и 7, количество слайсов изменилось. Добавилось еще 4 виртуальных. Изменились и их номера.)
Так как количество цветов в этих элементах, тоже небольшое, сохраняем их в формате GIF. Схема сохранения описана выше. Все пройдет так же гладко, только количество цветов и размер файла немного увеличились.
В следующей главе мы перейдем к сохранению других элементов сайта, которые требуют для себя отдельных документов, поэтому пришло время сохранить наши 6 оптимизированных картинок на диск. Снова нажимаем CTRL+ALT+SHIFT+S. Теперь, для порядка, надо задать имена нашим будущим картинкам. Сделать это можно щелкнув 2 раза на заголовке слайса. Откроется небольшое окно, куда мы введем осмысленные имена для наших картинок.
Ну вот, почти и все. нажимаем кнопку Save, открывается стандартное окно сохранения файлов. Почти стандартное. В нижней его части мы увидим вот такое:
На имя и тип файла можете не обращать внимания, нас интересует селектор Slices. Там нужно установить All Slices или All User Slices, чтобы сохранить все слайсы, включая виртуальные или только те, которые мы оставили в живых. Вот теперь все. Можете пойти в ту папку, куда вы их сохранили и посмотреть на то, что там лежит. Файлы, которым вы дали имена, можно оставить, остальные можно удалить.
GIF с прозрачностью
У нас осталась верхняя правая надпись, которая будет лежать поверх масштабируемой плашки. Сделаем ее прозрачной.
В принципе, ее можно сохранить и с куском фона, но это непрактично. Она будет больше весить, да и если ее придется позиционировать по вертикали, градиент съедет.
Итак, инструментом CROP, обрезаем наш макет по размеру этой надписи и удаляем лишние слои, чтобы осталась только верхняя пласшка и сама надпись. В итоге, получается файл такого размера:
Сохраняем его под другим именем. Теперь вернемся к панели Save for Web. Если выбрать формат GIF, в числе других параметров, будет такой, как Matte. Это цвет фона для прозрачных объектов. Дело в том, что прозрачность в GIF организована при помощи однобитного альфаканала, то есть пиксель может быть либо прозрачным, либо нет. Но у нас есть мягкие края, как раз, с полупрозрачными пикселями. Именно там и применяется фоновый цвет. Выберем пипетку, там же, на панели инструментов и, увеличив изображение побольше, выберем цвет, находящийся примерно на середине градиента. Разброс по цветам в градиенте небольшой, думаю будет незаметно. В селекторе Matte выбираем Eyedropper Color и сразу видим наш цвет, в качестве фона. Теперь нажимаем кнопку Done и возвращаемся к редактированию. Тут нам надо отключить все лишние слои, оставив только надпись на прозрачном фоне.
Опять вызываем панель сохранения для Web, в параметрах GIF ставим галочку на пункт Transparency и, если все сделано правильно, видим вот такое:
На краях заметны зазубрины, цвета фона, который мы установили. Не пугайтесь, после установки этой картинки на место, все будет нормально. Собственно, осталось сохранить картинку под каким-нибудь именем.
Анимированный GIF
Анимированный GIF отличается от обычного только тем, что в нем может больше одного кадра. Для каждого кадра можно устанавливать разное время воспроизведения. Для анимации можно устанавливать цикличный, одноразовый режим воспроизведенния, либо можно явно задать количество повторений.
Перед вами две картинки с прозрачностью, однако, на первой, заметна зазубренность по краям, а на второй все нормально. Это, потому что, на первой, при сохранении установлен цвет фона черным, а на второй — цвет фона страницы.
Кнопки
Честно говоря, про кнопки я забыл и не предусмотрел их в макете. Теперь придется выкручиваться. А не сделать ли нам кнопками картинки, которые находятся на странице? Ведь, что такое кнопка? Это одна-две картинки, которые показывают различные положения кнопки, спокойное, когда ничего не происходит и состояние, когда мышь наведена на нее.
Создаем новый документ, с размерами, совпадающими с размерами картинок и переносим их туда. Для создания кнопки из одной картинки достаточно скопировать слой с ней и на новом слое изменить, например, цвет рамки или как-то по другому сделать ее чуть-чуть отличающейся. Далее, необходимо сохранить оба варианта в нужном формате. Вот, что у меня получилось:
Итак, все готово. Можно верстать страницу. Я попробовал это сделать и вот, что получилось. Сверстано немного кривовато, но я не совсем верстальщик и задача сегодня была другая. Уверен, у вас получится гораздо лучше.
