При помощи этого урока вы сможете создать макет сайта, который сможет использоваться в дальнейшем для веб-сайта о звездах, и шоу-бизнесе. Это яркий, стильный макет , на изготовление которого потребуется не так много времени и сил, но не оставит равнодушным ни одного посетителя.
Создайте новый документ 1200*1500 пикселей.
Создайте новую группу слоев , назовите их «Заголовок» или что-то в этом роде. Создайте при помощи инструмента Прямоугольное выделение область, размером примерно 1000*110 пикселей. Это будет фон Заголовка , используя инструмент Заливка , залейте на новом слое выделенную область. Добавьте новому слою следующие стили, как показано на рисунке ниже:
Добавьте в верхнюю часть логотип.
Далее создадим окно поиска , для этого инструментом Прямоугольник со скругленными углами , радиусом 10 пикселей создадим область, как показано на рисунке ниже. Добавим на область иконку поиска и текст.
Применим к кнопке «Поиск» следующие стили:
Далее создайте новую группу слоев и назовите его «Меню». Инструментом Прямоугольник со скругленными углами и радиусом 4 пикселя создайте прямоугольную форму по всей ширине макета.
Далее на эскизе слоя щелкните правой кнопкой мыши и выберите из меню Выделить пикселы. Перейдите в меню Выделение-Модификация-Уменьшить . Введите 1 пиксель и нажмите Применить.
Измените цвет переднего плана на черный , далее наложите градиент, так как показано на рисунке от серого к прозрачному, как показано на рисунке.
Далее нанесем текст на меню навигации. Добавим в тексте белые тени, шириной в 1 пискель.
Следующим шагом создайте прямоугольную форму, при помощи инструмента Прямоугольник. Далее перейдите в меню Редактирование – Трансформация –Перспектива. Трансформируйте прямоугольник, добавьте ему такой же тип градиента как и для кнопки поиска.
Применяя тот же метод создайте еще один небольшой прямоугольник и добавьте к нему градиент:
Используя инструмент Перемещение разместите прямоугольник, как показано на рисунке ниже:
Продублируйте слой с маленьким прямоугольником и разместите его на левой стороне полосы. Далее используйте инструмент Текст , чтобы добавить текст (в нашем случае это будет сообщение Твиттер)добавьте ему стили слоя :
Теперь воспользуйтесь ссылкой для добавления значка Твиттер http://www.iconfinder.com/, затем добавьте значок в наш макет и добавьте ему три стиля слоя: внутренняя тень, тень и наложение цвета. Выполните настройки, указанные ниже:
Вот что должно у вас получиться:
Следующий шаг – создаем окно контента.
Наш сайт будет включать в себя две колонки , которые будут отображать новости, интервью и галерею фотографий.
Создаем прямоугольник со скругленными углами (510*350 пикселей) и радиусом округления 10 пикселей , темно красного цвета # 860609.
Далее добавим в наш прямоугольник картинку. Для того, чтобы придать изображению округленные углы нажмите на эскизе прямоугольник, затем перейдите на слой с изображением. Перейдите в меню Выделение – Инверсия и удалите ненужные области.
Скопируйте красный прямоугольник , а затем трансформируя уменьшите его на 20%. Добавьте наложение градиента на это прямоугольник.
Заполните текстом нижнюю часть прямоугольника в нашем случае это будет название и краткое описание новости, опубликованной на сайте.
Создайте новую группу слоев. Используя Прямоугольник со скругленными углами создайте форму размером 100*100 пикселей.
Далее дублируем этот слой, меняем ему цвет на белый . Добавляем маску слоя и инструментом Овальное выделение отсекаем ненужную область, как показано на рисунке. Далее добавляем градиент от белого к прозрачному.
Добавьте изображение на созданную область.
В завершении работы над этим объектом – нанесите текст - название и описание.
Скопируйте несколько раз этот блок , чтобы получилась у нас новостная группа, расположенная в двух колонках.
Далее создаем следующий элемент – заголовок списка новостей.
Заголовок списка новостей должен быть ровно под предыдущим блоком. Поэтому создаем новый прямоугольник с закругленными углами 510*40 пикселей. Цвет тот же , что использовался раннее.
Используйте тот же метод создания блика на фигуре, что и описанный выше.
Далее наносим текст, добавляем к нему стиль:
Скопируйте красный прямоугольник, на копии залейте его желтым цветом # ee931a. Используя маску слоя и Полигональное лассо для того, чтобы заместить половину прямоугольника желтым цветом.
Для того чтобы создать тени используйте новый слой , на котором примените градиент от черного к прозрачному и расположение как показано на рисунке ниже. Измените режим наложения на Перекрытие и уменьшите прозрачность до 50%. Нанесите текст на эту область.
Используйте инструмент Текст для нанесения ссылок под заголовком.
Правая часть макета содержит те же самые элементы, что и левая часть, но с другими размерами и картинками. Дублируйте уже созданные вами блоки, масштабируйте их для заполнения правой части макета.
Создаем подвал сайта.
Для подвала создайте прямоугольную форму с закругленными углами 980*80 пикселей.
При помощи инструмента Текст добавьте в прямоугольник самые важные ссылки на вашем веб-сайте, знак копирайта, контакты.
Продублируйте логотип с верхней части и разместите копию в нижней правой части макета.
Добавим иконки Twitter, Facebook и / или RSS.
Вот и закончен наш макет.
Думаю этот урок может пригодится как начинающим веб-дизайнерам, так и людям, которые давно работают в этой области. Новые пособия всегда наводят на новые мысли, идеи и реализацию ваших задумок.
Если вам понравился урок и он был вам полезен не забывайте подписываться на ленту RSS.