Кто знает, как разрабатывать веб-сайты, знает, что обычно не начинают с HTML-структуры. Вместо этого они берут графическую программу и создают макет страницы. (Тот, кто работает в агентстве, получает макет от дизайнера или клиента). Затем задача состоит в том, чтобы построить страницу из этого макета. Ровно об этом и пойдет речь.
В контексте воссоздания макетов вы будете постоянно сталкиваться с терминами Slicing и Dicing. На самом деле это просто означает, что нужно взять шаблон или дизайн, нарезать его в своей графической программе, а затем вновь собрать с помощью HTML.
Правильная графическая программа
Ну, у каждого есть свои предпочтения, касающиеся программного обеспечения, которое он или она предпочитает использовать. Также обстоит дело и с графическим программным обеспечением. В контексте профессионального веб-дизайна ситуация немного иная. Там практически исключительно работают в Photoshop. Фактически большинство дизайн-макетов представлены в формате PSD. И именно этот формат PSD нельзя открыть или отредактировать во всех программах.
Если у вас нет Photoshop, вы не оказываетесь совершенно беззащитными. Возможная альтернатива представлена GIMP. Эту программу вы можете бесплатно скачать с сайта http://www.gimp.org/. Я покажу вам основные шаги создания макета с помощью GIMP. Это работает примерно так же и в Photoshop.
Создание собственного макета
Сначала вы обдумываете основные аспекты дизайна:
• Какой ширины должен быть макет?
• Сколько столбцов должно быть включено?
Затем создайте холст через Файл>Новый и установите размер. Хотя мой созданный макет будет "заполнять всю страницу", истинное содержимое будет иметь ширину всего 1000 пикселей. Я устанавливаю высоту макета в 887 пикселей. (При этом высота веб-сайта в конечном итоге все равно будет зависеть от содержимого).
Нажмите OK, чтобы подтвердить данные. Таким образом, холст готов и может быть заполнен содержимым. (Для удобства я работаю в черновом режиме с серым фоном. На веб-сайте этот фон позже не будет виден).
Одним из типичных элементов, который должен присутствовать на веб-странице, является логотип, обычно представленный в виде изображения. Чтобы вставить его в макет, вызовите Файл>Открыть и выберите свой логотип, который должен быть в форматах PNG, GIF или JPEG. Подтвердите выбор, нажав Открыть. Теперь нажмите Ctrl+C, чтобы скопировать логотип в буфер обмена. Затем перейдите к самому веб-дизайну и нажмите там Ctrl+V. Вставленный логотип не будет находиться на желаемом месте. Однако с помощью инструмента перемещения его легко переместить в нужное положение.
Если изображение не перемещается, сначала активируйте слой. Соответствующие настройки можно найти в меню Окно>Закрепляемые диалоги>Слои.
Для улучшения структуры, можно включить Вспомогательные линии. Чтобы сделать это, щелкните по Линейке правой кнопкой мыши и, удерживая левую кнопку мыши, перетащите ее на нужное место.
Таким образом, можно создавать произвольное количество вспомогательных линий, по которым можно выравнивать элементы веб-страницы.
Теперь создайте еще один слой. Этот слой должен содержать верхнее меню.
Можно назвать его Верхнее меню. Создайте слой с помощью OK. Выделите прямоугольную область с помощью Прямоугольного выбора, в которую будет вставлено меню.
В текущем примере я предполагаю, что фон верхнего меню будет иметь градиент. Для этого я выбираю Градиент: Выделение градиентом (заливка).
Градиент должен идти от серого к черному. Соответствующие цвета можно настроить через Цветовые поля. В качестве типа градиента я выбираю СВЕРХУ вниз, то есть он идет от переднего к заднему фону. Теперь, удерживая клавишу Ctrl, в выделенной области проведите линию сверху вниз. После отпускания левой кнопки мыши область имеет желаемый градиент.
В принципе у вас есть две возможности:
• Оставить область для навигации такой, какая она есть.
• Вставить отдельные пункты меню, чтобы уже в процессе создания понять, какие шрифты и т. д. вы используете.
Какую из этих двух вариантов выбирать, в конечном итоге решать только вам. Однако если, например, вы хотите представить макет своему клиенту, я настоятельно рекомендую включить пункты меню. Опыт показывает, что у многих клиентов здесь часто не хватает воображения.
Сначала выберите Шрифт. В GIMP соответствующие настройки можно найти в меню Окно>Задокированные диалоги>Шрифты.
В рамках этого ряда уже были рассмотрены проблемы шрифтов в связи с CSS и HTML. В конечном итоге вы, как веб-дизайнер, в теории можете указать любой шрифт. Однако вы не знаете, есть ли он на компьютере посетителя, и поэтому он будет отображен. Поэтому результаты, особенно если вы используете очень экзотические шрифты, сложно контролировать. Однако я вернусь к этому аспекту позже в этом ряде, когда мы будем говорить о шрифтах на примере веб-сайта. Для текущего макета я, в любом случае, выбираю следующие настройки:
• Verdana bold
• 20 пикселей
• Белый цвет шрифта
Теперь вы можете добавить отдельные пункты меню таким образом. Лучше всего скопировать уровень, в котором содержится первый пункт меню, и вставить его как новый уровень. Затем можно настроить текст уровня. Таким образом, создается верхнее меню.
Верхнему меню должен быть присвоен эффект при наведении. Когда курсор указывает на отдельные пункты меню, цвет фона меняется. Этот аспект также должен быть визуализирован в макете. Для этого выставляется желаемый цвет при наведении и копируется один из существующих уровней меню. Этому уровню присваивается цвет. В текущем примере я предполагаю синюю градиентную заливку. Затем вставляется текст пункта меню. Таким образом, у вас уже будет представление о том, как будет выглядеть меню в конечном итоге.
