Нет комментариев 20.04.2007

Yeah, baby! Созрел новый пост про WPTDS. Сегодня мы наконец-то дорисуем дизайн. В прошлом выпуске я достаточно подробно расписал как работать с шейпами, эффектами и текстом. В этой части таких подробностей не будет. Если что не понятно - спрашивайте.

Открываем файл с нашим хэдером. Будем рисовать контентную часть с постами. Для начала нарисуем контейнер для постов, потому что если посты будут висеть в воздухе - мне не кажется это хорошей идеей. По задумке, контейнер должен лежать под шапкой частично. Поэтому мы выделяем самый первый слой, берем инструмент Shape [U] (рис. 1 ), точнее его модификацию с закругленными углами (1), ставим радиус в 5 пикселей и рисуем почти до самого низа нашего холста, ориентируясь на вертикальные рулеры, которые мы поставили в прошлый раз.

Добавляем к этому шейпу эффект тени со следующими настройками (рис. 2). Контейнер готов.

Теперь сделаем какой-нибудь оригинальный отделитель постов, чтобы визуально было видно примерно границы постов. Для этого мы выделяем слой с шейпом, который у нас в хэдере (белый, Shape 7 на палитре) и дублируем его (CTRL + J), сделав серого цвета (рис. 3).

Теперь его надо повернуть, уменьшить и отодвинуть в сторону. [ctrl + T] (Edit > Free Transform), кликаем правой клавишей мыши по объекту, выбираем [rotate 90° CCW] (против часовой на 90 градусов), теперь берем нижнюю (или верхнюю) среднюю точки и уменьшаем размер нашего шейпа по вертикали (без соблюдения пропорций). То есть просто сжимаем сверху и снизу. Применяем изменения. Добавим тень, точно такую же как мы делали для общего контейнера. А теперь с помощью инструмента [V] двигаем получившийся шейп влево так, чтобы он “прилип” к рулеру (рис. 4).

Получившийся шейп дублируем (CTRL + J), переворачиваем по горизонтали (CTRL + T, правая клавиша, Flip Horizontal) и двигаем вправо, на рулер. Двигать надо с зажатым SHIFT, чтобы шейпы оказались на одном уровне (рис. 5).

Теперь на палитре слоев объединяем два этих шейпа (рис. 6) и сливаем их в один слой с помощью CTRL + E.

Далее берем лупу [Z], сильно увеличиваем область с левым шейпом, берем инструмент выделения [M], выделяем небольшую полоску, как показано на рис. 7.

Теперь нажимаем CTRL + T и тянем за точку аж до правой части, где у нас другой шейп, чтобы протянуть такую типа линию (рис. 8).

Получившейся конструкции придаем тень (так же как и контейнеру) белый внешний однопиксельный stroke. Двигаем конструкцию ближе к хэдеру (рис. 9).

Осталось совсем немного. Добавляем текст. Заголовок поста над конструкцией - Georgia 24-36 points. Дата, рубрики, комменты - под конструкцией, выравниваем вправо. Tahoma 9-10 points.

Основной текст поста Georgia 12, выравнивание по ширине. Ссылки синие, подчеркнутые. И дублируем жирную ссылку на комментарии (рис. 10).

Теперь с помощью [M] выделяем весь получившийся пост, идем Edit > Copy Merged (копируем всю область через все слои). Edit > Paste (или CTRL + V) - вставляем копию из буфера и двигаем вниз. Получилось два поста (рис. 11). Под контейнером мелким почерком пишем копирайты. Там же будут различные кнопки.

Результат:

Всё. С дизайном закончили. В следующий раз начнем верстать.

Вопросы, комментарии?

Жми!

 Loading ...