Текущее состояние макета должно выглядеть примерно так:
Пока что был добавлен логотип и верхнее меню. Далее идет немного большая графика, которая должна быть видна непосредственно под навигацией.
Принцип создания новых слоев уже был описан в предыдущем руководстве. Поэтому я хочу показать вам что-то другое. Прямо под верхним меню должно быть показано большое изображение. Результат будет выглядеть следующим образом:
Изображение должно – когда вы его вставите – иметь правильные размеры. Поэтому, возможно, вам придется предварительно отредактировать его. Затем откройте Файл>Открыть и выберите изображение. Выбранное изображение затем отобразится в новом окне. Нажмите Ctrl+C, чтобы скопировать изображение в буфер обмена. Чтобы вставить изображение как слой, имеющий правильные размеры, вызовите Правка>Вставить как>Новый слой. Новый слой автоматически примет размеры изображения, и затем вы сможете легко переместить слой в нужное место. Таким образом, теперь все изображения, которые вы хотите вставить, могут быть взяты в макет и помещены туда.
Затем вставьте тексты в тех местах, где они действительно будут видны позже. Во время проектирования обычно используется так называемый заглушечный текст.
Прежде чем вы примете и начнете писать дикий "тест, тест, тест", я рекомендую посетить страницу http://www.blindtextgenerator.de/.
Там вы можете автоматически сгенерировать тексты-заглушки разных видов. Эти тексты затем могут быть легко вставлены в макет методом Копировать и вставить. В этом контексте также рекомендую посетить страницу http://dummyimage.com/. На этой странице можно сгенерировать заглушечные изображения любого размера. Эти заглушечные изображения могут затем использоваться, например, в качестве заполнителей для еще не созданных оригинальных график в ваших макетах.
Проблема с прозрачными слоями
Когда вы вставляете тексты, они будут состоять из нескольких элементов, таких как заголовки, абзацы текста и т. д. Поэтому вам следует объединять соответствующие тексты в отдельные слои. Таким образом, вы сможете всегда перемещать эти тексты вместе. Вызовите Слои>Новый слой. Затем назначьте слою нужный размер и, при необходимости, цвет фона. Однако чаще всего вам понадобится прозрачный/фон. Проблема заключается в том, что прозрачные слои трудно перемещать. Часто при этом задевается подчиненный слой. Но эту проблему можно легко обойти. Определяющими здесь являются настройки в окне Панель инструментов. Включите в нем Инструмент перемещения. Затем в нижней области окна активируйте опцию Переместить активный слой.
Таким образом, вы можете перемещать прозрачные слои в любое удобное положение.
Вырезка элементов
Когда вы удовлетворены макетом, приходит время приступить к практической реализации в виде веб-страницы HTML. Здесь наступает слайсинг, т. е. вырезание. Этот процесс состоит в том, чтобы разрезать макет на отдельные элементы, которые позже будут снова собраны с помощью HTML и CSS. Вам нужно вырезать все элементы, которые должны быть показаны отдельно. Исключением являются, конечно, все графические элементы, которые все равно уже находятся в виде отдельных файлов. В первую очередь я хочу показать вам, как вы можете вырезать элементы. Нарисуйте линии направляющих вокруг интересующего элемента. В конечном итоге направляющие линии станут границами разреза. Поэтому убедитесь, что вы правильно их устанавливаете.
Отметьте желаемую область и нажмите комбинацию клавиш Ctrl+Shift+C. (Это касается как GIMP, так и Photoshop). Затем создайте новый файл. В Photoshop этот файл сразу будет иметь нужный размер. В GIMP этот процесс не так прост. Здесь вам просто нужно создать файл с достаточными размерами. Через Ctrl+V содержимое вставляется из буфера обмена.
Теперь включается инструмент урезки. Определите ее для области, которую хотите вырезать, и затем нажмите клавишу Ввод. Изображение будет обрезано по выбранной области. Через Файл>Сохранить как вы можете сохранить изображение.
Важным стилевым элементом для многих веб-сайтов является градиент. Такой градиент также присутствует на показанном здесь макете. Чтобы вырезать градиент, выберите узкую область соответствующего градиента. Для этого действительно достаточно установить область шириной в один пиксель. Высота, напротив, должна соответствовать фактической высоте элемента. С помощью CSS позже вы сможете сделать так, чтобы эту графику горизонтально повторяло, пока не будет заполнен весь элемент. Конечно, вы также можете использовать более широкий обрывок изображения. Однако это повлияет на производительность страницы. Поэтому для градиентов выбирайте ширину в один пиксель.
С помощью Ctrl+Shift+C копируйте однопиксельную графику в буфер обмена и вставляйте ее снова в виде нового изображения. Затем сохраните новое изображение после того, как его перенесете на соответствующий фрагмент.
Это должно полностью проиллюстрировать основной принцип вырезки. Таким образом, вы вырезаете все элементы из макета, которые позже будут частью веб-сайта. Если у вас уже есть отдельные элементы страницы, которые не нужно вырезать, вы можете использовать их напрямую, без промежуточной вырезки.
Результат должен быть следующим: вы имеете все графики, которые хотите использовать в своем веб-сайте. Это касается, например, логотипа, фонов, градиентов и т. д. Пока мы говорим о градиентах, мне, конечно, известно, что градиенты можно легко создавать с помощью CSS3. Однако проблема заключается в том, что это еще не поддерживается всеми браузерами. И поскольку вырезка хорошо демонстрируется на примере градиента, в этом руководстве я решил придерживаться графики для реализации градиентов.
