Р’ этом СѓСЂРѕРєРµ РјС‹ предлагаем создать сайт СЃ необычным расположением блоков. Рто актуальное Рё изящное решение поможет разместить РЅР° сайте РјРЅРѕРіРѕ разнообразной информации одновременно.
Сложность: низкая
Время: до 1 часа
Навыки для «прокачки»:
- создание разметки сайта
- работа с векторными объектами в Фотошопе
- растрирование объектов
- работа со свойствами слоя
Р’ этом СѓСЂРѕРєРµ СЏ покажу вам, как создать хороший бизнес-макет сайта. Ртот макет может быть использован также для корпоративных целей. Если РІС‹ просматривали СѓСЂРѕРєРё web дизайна, то СЏ думаю, РІС‹ заметите, что СѓСЂРѕРє очень РїСЂРѕСЃС‚. Такой сайт легко применим для работы СЃ РґРІРёР¶РєРѕРј Word Press Рё РґСЂСѓРіРёС… открытых РґРІРёР¶РєРѕРІ.
Начнем СЃ создания РЅРѕРІРѕРіРѕ документа. Р’ уроке используются следующие размеры: 960С…900 РїРёРєСЃ. Ртот размер очень С…РѕСЂРѕС€, потому что РѕРЅ подойдет практически для всех мониторов.
Активируйте инструмент Прямоугольник=Rectangle Tool , и создайте несколько форм. Да-да, располагать их на сайте можно так, как вам нравится, но соблюдая разметку.
Затем активируйте Прямоугольник со скругленными углами=Rounded Rectangle Tool , и создайте еще одну форму.
Р’С‹ можете увидеть этот прямоугольник сверху, РѕРЅ выполнен РґСЂСѓРіРёРј цветом. Рто только для того, чтобы РІС‹ лучше видели, что сделано. Вам необходимо делать РІСЃРµ черного цвета. Выберите 3 слоя, как РЅР° картинке РЅРёР¶Рµ.
Робъедините все три слоя в один (нажмите CTRL + E)
Активируем Перо=Pen Tool, и создадим 2 маленьких треугольника, как на картинке ниже (обратите внимание, используется другой цвет, чтобы вы лучше видели, что именно было сделано)
У вас должно быть что-то вроде этого.
В следующем шаге нужно будет растрировать одну из форм. Для растрирования=Rasterize формы нужно щелкнуть правой кнопкой мышки на форме.
Затем идем Выделение-> 3агрузить выделение=Select-> Load Selection.
Выберите инструмент Прямоугольная область=Rectangular Marquee Tool и переместите выделение как на картинке ниже.
Выберите слой, который мы сделали в начале урока, и нажмите Delete на клавиатуре.
Переместите выделение и на другую сторону и нажмите Delete. После того как вы все сделали, нажмите CTRL + D чтобы снять выделение.
Добавим следующие стили слоя для всех черных форм (дважды кликнув возле названия слоя).
Вот наш результат на этом этапе.
Еще раз будем использовать инструмент Прямоугольник со скругленными углами =Rounded Rectangle Tool , и создадим несколько форм для наполнения блоков.
Для всех этих белых форм, добавим стили слоя.
Вот наш результат.
Добавим текст с помощью инструмента Горизонтальный текст=Horizontal Type Tool - ссылки категорий выполняйте с большим межстрочным расстоянием и подчеркнутым стилем.
Теперь скачайте этот набор иконок (Твиттер, РСС и другие). Теперь добавим изображения и логотип.
С правой стороны мы изобразим блок слайд-шоу. Для начала будем использовать Прямоугольник со скругленными углами =Rounded Rectangle Tool , чтобы сделать 5 маленьких форм.
Теперь добавим изображение на пустое место.
Макет почти готов. Создадим форму поиска.
РќР° верхней части макета добавим еще РѕРґРЅРѕ изображение СЃ изображением 3D-моделей. Рто наш окончательный результат. РЇ надеюсь, вам понравилось. Рто был еще РѕРґРёРЅ СѓСЂРѕРє РёР· категории, СѓСЂРѕРєРё web дизайна.
Автор: Razvan
Ссылка на источник: http://www.grafpedia.com/