В данном уроке показано, как сделать простой и легкий акварельный дизайн шаблона блога. Если у вас есть вопросы, то задавайте их в комментариях. Вот конечный результат урока.
Первое, что необходимо сделать, это создать новый документ размером 1024×1100.
Далее необходимо добавить фон. Я использовала изображение, найденное на deviantart here. Это изображение не достаточно большое, но я растянула его во весь документ.
Теперь создадим логотип. С помощью шрифта Helvetica цветом #000000 я написала «Vicinity» с настройкой bold, а цветом #D75160 я написала «Designs» с настройкой Regular. У вас получиться следующее.
Теперь добавим небольшую линию под логотип. С помощью Rectangle Marquee tool сделайте выделение как на рисунке и залейте его цветом #FFFFFF.
Уменьшите opacity до 90%, чтобы лучше сочеталось с фоном. Затем добавьте текст в созданную ячейку цветом #64685E.
Теперь добавим поле для твоего логина и клиентов. На правой стороне шаблона снова с помощью Rectangle Marquee Tool сделайте выделение как на рисунке и залейте его цветом #000000.
Уменьшите opacity до 30%, а затем добавьте текст как на рисунке цветом #FFFFFF.
Далее создадим навигацию. Снова с помощью Rectangle Marquee Tool сделайте выделение как на рисунке и залейте его цветом #000000.
Уменьшите opacity до 70% для получения красивого прозрачного поля на цветном фоне.
Теперь покажем, как будут располагаться ссылки. Для каждой ссылки мы добавим описание, чтобы она была забавная и дружелюбная. С помощью Rectangle Marquee Tool сделайте выделение как на рисунке и залейте его цветом #303130.
Измените blending mode квадрата на Soft Light и затем вы можете добавить текст. Для ссылки я использовала цвет #FFFFFF, а для описания цвет #FFFFFF, но уменьшила opacity до 50%.
Повторите эти действия для создания всех навигационных ссылок. Для активной ссылки я использовала цвет #3CC1F9 вместо белого.
На свободное место в конце вы можете добавить опции для пользователей для описания RSS Feed. Добавьте только простой белый текст и RSS иконки и у вас получиться следующее.
Далее создадим контекстную область. С помощью Rectangle Tool сделайте выделение как на рисунке и залейте его цветом #FFFFFF.
Сначала добавьте заголовок для области блога. Я выбрала слова «Latest Articles» цвета #000000 с настройкой bold. Затем я использовала цвет #3B3A3A для «- - - - - - - - - - - -» под заголовком. У вас получиться следующее.
Теперь создадим панель поиска. Снова с помощью Rectangle Marquee tool сделайте выделение как на рисунке и залейте его цветом #000000.
Примените следующие стили слоя, дважды щелкнув по слою.
У вас получиться следующее.
Теперь необходимо сделать кнопку поиска. Поэтому с помощью Rectangle Marquee tool сделайте выделение как на рисунке и залейте его цветом #000000.
Примените следующие стили слоя.
Теперь добавьте текст белого цвета сверху кнопки и у вас получиться следующее. (обратите внимание, я добавила небольшую белую границу вокруг углов, но это необязательно)
Добавьте текст сбоку от области поиска и ваш документ будет выглядеть так.
Начнем создавать боковую панель. Идея состоит в том, чтобы сделать ее простой. Необходимо сделать ячейку для заголовка «Recent Posts», поэтому с помощью Rectangle Marquee Tool сделайте выделение как на рисунке и залейте его цветом #D65863.
Теперь возьмите Text Tool и напишите «Recent Posts» цветом #FFFFFF.
Далее с помощью Polygonal Lasso Tool сделайте маленькое треугольное выделение и залейте его цветом #000000. затем добавьте текст названия поста. Для ссылки я использовала цвет #2E92BC.
Теперь повторите эти действия и создайте еще несколько ссылок. У вас получиться следующее.
Последнее, что необходимо сделать, это добавить верхнюю границу в 2 пикселя снизу. Сделайте это с помощью Rectangle Marquee tool и залейте ее цветом #000000. Уменьшите opacity слоя приблизительно до 10% и получите следующее.
Повторите действия для создания раздела Recent Comments, но измените цвет фона заголовка на #B7D8CF. Ваш документ будет выглядеть так.
Теперь пришло время сделать пост лист. Снова с помощью Rectangle Marquee Tool сделайте выделение как на рисунке и залейте его цветом #F1F1F1.
Далее необходимо сделать красивую область закругленными краями, 3где будут располагаться иконки каждого поста. Поэтому с помощью Rounded Rectangle Tool с радиусом 10 px нарисуйте прямоугольник с закругленными краями как на рисунке (не важно, какого цвета, так как мы его позже изменим).
Теперь примените к прямоугольнику следующие стили слоя.
Я добавила иконку с одного сайта для примера и получила следующее.
Теперь все, что осталось, это с помощью text tool расположить какую-нибудь информацию как на рисунке. Иконку календарь я использовала из набора at this link.
Необходимо, чтобы каждый пост был на различном фоне, поэтому ко второму посту я не добавляла фон и изменила иконку календаря на другую из того же набора. У вас получиться следующее.
Осталось только создать нижнюю панель. С помощью Rectangle Marquee Tool сделайте выделение как на рисунке и залейте его цветом #000000.
Теперь уменьшите opacity слоя приблизительно до 70%, а затем добавьте текст как на рисунке.
Вот и все! Когда вы все сделаете, ваш шаблон будет выглядеть так.
Коментарии (1)
