Все уроки Фотошоп

Есть вопрос? Задайте здесь и сейчас!

Форум Регистрация Выслать активацию Восстановить пароль Дополнительно Файлы Видео Галереи Справка  
Перезагрузить страницу Страна Фотошопия Adobe Photoshop. Фотошоп и все, с ним связанное >> Обучение Adobe Photoshop >> Необработанные уроки Photoshop >>

Тёмный дизайн для шаблона авто-сайта, Car Layout

Перезагрузить страницу Страна Фотошопия Adobe Photoshop. Фотошоп и все, с ним связанное >> Обучение Adobe Photoshop >> Необработанные уроки Photoshop >>

Тёмный дизайн для шаблона авто-сайта, Car Layout


 
Опции учебника
Тёмный дизайн для шаблона авто-сайта, Car Layout

Предыдущий учебник Тёмный дизайн для шаблона авто-сайта, Car Layout Следующий учебник
Опубликовал(а) Gostemilov
20.06.2015
Тёмный дизайн для шаблона авто-сайта, Car Layout


Car Layout #4



Приветствую всех. Сегодня будет урок, где я собираюсь сделать стильный автомобильный блог. Хотя, конечно, его можно будет использовать не только для автомобилей, но и для любого вашего контента.

Итак, начнем.

Создайте новый документ 850х830 px с любым цветом фона. Установите (#3b3b3b ) как основной цвет и (#181818 ) как вторичный. Выберите Gradient Tool с настройкой Radial Gradient. Проведите градиент сверху вниз от края до края холста.



Сверху разместите логотип вашего сайта и слоган:



Для слоя с логотипом используйте следующие стили:







Между логотипом и слоганом добавьте небольшую красную линию 1х2 пикселей и примените такие стили слоя:





Выберете Rounder Rectangle Tool с радиусом 10 px. Нарисуйте панель навигации под логотипом.


Добавьте такие стили слоя:







Теперь измените прозрачность слоя с навигацией до 25%. Нажмите и удерживайте Ctrl клавишу. Кликните по иконке слоя с навигатором. Появится выделение вокруг вашей панели. Теперь создайте новый слой над слоем с навигатором (выделение не снимайте). Select – Modify – Contract. Параметр на 6px. Теперь залейте выделение черным.



Скопируйте стили слоя с навигатором и вставьте их на слой с черным прямоугольником (правый клик по слою с навигатором, copy layer style, правый клик по слою с прямоугольником — paste layer style), смените прозрачность слоя с прямоугольником на 100%.



Добавьте текст на навигатор. Затем на новом слое сделайте белый прямоугольник, как на рисунке снизу.



Удерживайте клавишу Ctrl и нажмите по иконке слоя с навигатором. Отпустив Ctrl выберите слой с белым прямоугольником. Инвертируйте выделение (shift+ctrl+i) и нажмите клавишу Del. Смените прозрачность слоя до 4%. Ваша панель навигации должна выглядеть примерно так:



Используя те же шаги, что и при создании навигации сделайте большой прямоугольник ниже, под панелью навигации.



Далее дело вашей фантазии. Выберите изображение удовлетворяющее контенту вашего сайта (я взял фото Barabus). Вставьте изображение на новый слой поверх общего шаблона сайта, Ctrl+клик по слою с вашим изображением, Edit – Copy, далее я Ctrl+click по слою с большой рамкой, Edit – Paste into. Таким образом ваше изображение можно будет передвигать внутри поля, но за края выходить оно не будет. Если изображение не подходит под размеры поля измените его.



Добавьте к вставленному изображению следующие стили слоя:





Мы можете добавить еще блоки для контекта.



Для каждого блока информации создайте с помощью Rounder Rectangle Tool боксы черного цвета с обводкой черно-белым градиентом.

Далее добавьте для блоков заголовки. После каждого заголовка на новом слое добавьте небольшую полоску (как между логотипом и слоганом).



Вот и все. Блог готов. Теперь осталось только добавить текст.


Автор-оригинал тут
Перевод: PloCoon

Опубликовал(а)
Аватар для Gostemilov
Администратор
Он малахольный
Регистрация: 07.09.2007
Адрес: Россия, Москва. 100 метров до МКАД
Возраст: 55
Сообщений: 92,012
Вес репутации: 10
Gostemilov репутация неоспорима Gostemilov репутация неоспорима Gostemilov репутация неоспорима Gostemilov репутация неоспорима Gostemilov репутация неоспорима Gostemilov репутация неоспорима Gostemilov репутация неоспорима Gostemilov репутация неоспорима Gostemilov репутация неоспорима Gostemilov репутация неоспорима Gostemilov репутация неоспорима


Рекомендовать другим

Копирайт
Оригинал урока
demiart.ru/forum/index.php?showtopic=83464
  #1  
By Gostemilov on 20.06.2015, 19:50
Тёмный дизайн для шаблона авто-сайта, Car Layout

картинок не видно
  #2  
By Gostemilov on 20.06.2015, 19:50
Тёмный дизайн для шаблона авто-сайта, Car Layout

Перезалил
 



Опции учебника

Ваши права в разделе
Вы не можете создавать новые темы
Вы не можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.
Trackbacks are Выкл.
Pingbacks are Выкл.
Refbacks are Выкл.


Похожие темы
Название учебника Автор учебника Раздел Числу комментариев Последнее сообщение
Дизайн сайта с кляксами, Web Design Layout Tutorial Gostemilov Необработанные уроки Photoshop 0 22.06.2015 09:45
Дизайн сайта в DJ стиле, DJ Layout #2, дизайн, макет Веб-Сайта Gostemilov Необработанные уроки Photoshop 0 22.06.2015 08:05
Дизайн сайта Мебельной Компании, Interior Design Layout Gostemilov Необработанные уроки Photoshop 0 22.06.2015 06:05
Дизайн сайта Программного Обеспечения, Software Layout #5 Gostemilov Необработанные уроки Photoshop 0 20.06.2015 00:30
Фотореалистичный дизайн сайта, Create a photorealistic web layout Gostemilov Необработанные уроки Photoshop 0 19.06.2015 23:50

###
Социальные сети
Группы
Основные разделы
Скачать и поделиться

Новости Фотошопии
Подписаться письмом
Дополнительно

Текущее время: 21:00. Часовой пояс GMT +2.


удаленная проверка сервера uptime российских хостеров
Rambler's Top100


.
Locations of visitors to this page

Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2018, vBulletin Solutions, Inc. Перевод: zCarot
vBulletin Optimisation by vB Optimise (Reduced on this page: MySQL 15.00%).