Это мой окончательный результат урока:
Загрузить файл-источник
Файл-источник для этого урока фотошопа можно загрузить с TrendyPacks.com за 5$/каждый
Хотите больше?
С Infinity Design Pack Вы получите доступ ко всем файлам-источникам наших уроков фотошоп + все пакеты векторов и кистей от TrendyPacks.com (всего там 3000 графических элементов и 6 месяцев бесплатных обновлений!)
Если Вы будете следовать моим инструкциям шаг за шагом, Вы сможете создать такое же расположение в psd за 10 минут. Я должен сказать, что я потратил больше заявленного времени, так как сначала сделал набросок на бумаге с помощью карандаша, затем попытался найти наилучшие цветовые комбинации и потом всё соединил, но, если бы я пропустил все эти шаги, то реальное время составило бы 10 минут. Поэтому перед началом этого урока фотошопа запустите секундомер!
Итак, начнём (урок и наш отсчёт времени)!
Открываем Фотошоп и создаем новый документ (Ctrl + N)
В левой части я добавлю наш логотип (TrendyTuts), а в правой с помощью инструмента Rectangle tool я буду создавать эту фигуру (527px на 43px). Я использовал цвет #f58c3e.
Я поделю фигуру на две части и поверх этого всего создам ещё одну голубую фигуру (#46afe0), используя инструмент Rectangle tool. Используя векторные фигуры из свободного набора фигур я добавлю ленту RSS и иконку Твиттера.
Вот, что у меня вышло в результате:
Затем создаем фигуру с помощью инструмента Rounded Rectangle Tool – выбираем радиус 10рх.
![Создание сайта в фотошопе за 10 минут! Создание сайта в фотошопе за 10 минут!](/uploads/posts/2010-06/1277410589_4.jpg)
Я создам фигуру с размерами 937рх на 1127рх и буду использовать в качестве цвета #a7aa9d
Затем я применяю эти настройки стиля слоя Layer Styles:
![Создание сайта в фотошопе за 10 минут! Создание сайта в фотошопе за 10 минут!](/uploads/posts/2010-06/1277626213_6.jpg)
![Создание сайта в фотошопе за 10 минут! Создание сайта в фотошопе за 10 минут!](/uploads/posts/2010-06/1277410660_7.jpg)
Затем поверх этой фигуры я создам другую, используя инструмент Rounded Rectangle Tool с радиусом 10рх. Размеры: 922рх на 1108рх и цвет #cbd0bc.
В ходе следующего шага нам необходимо убедиться, что выбран инструмент Rounded Rectangle Tool, и создать эти фигуры.
Затем я создам панель навигации.
Я выбираю инструмент Rounded Rectangle Tool и создаю эту фигуру
Затем, используя инструмент Type tool, я рисую такой элемент (сначала в верхнем левом углу фигуры)
![Создание сайта в фотошопе за 10 минут! Создание сайта в фотошопе за 10 минут!](/uploads/posts/2010-06/1277410618_11.jpg)
Я нажимаю на клавиатуре Ctrl+Alt+Shift+N (чтобы создать новый слой), затем я нажимаю правой кнопкой на фигуре и выбираю пункт меню Make selection.
![Создание сайта в фотошопе за 10 минут! Создание сайта в фотошопе за 10 минут!](/uploads/posts/2010-06/1277410628_12.jpg)
Я выбираю инструмент Paint Bucket Tool и заливаю моё выделение красным цветом.
![Создание сайта в фотошопе за 10 минут! Создание сайта в фотошопе за 10 минут!](/uploads/posts/2010-06/1277410625_13.jpg)
Я сделаю то же самое с правой частью.
![Создание сайта в фотошопе за 10 минут! Создание сайта в фотошопе за 10 минут!](/uploads/posts/2010-06/1277410577_14.jpg)
Теперь в моём наборе слоев Layer palette я выбираю навигационную панель и фигуры, нарисованные с помощью Pen tool (зажимаете Ctrl и с помощью мышки выбираем эти фигуры).
Когда они будут выделены, нажимаем правой кнопкой и выбираем пункт меню Convert To Smart Object (чтобы сгруппировать их)
![Создание сайта в фотошопе за 10 минут! Создание сайта в фотошопе за 10 минут!](/uploads/posts/2010-06/1277410633_15.jpg)
Затем применяем эти настройки стиля слоя Layer styles:
![Создание сайта в фотошопе за 10 минут! Создание сайта в фотошопе за 10 минут!](/uploads/posts/2010-06/1277410660_16.jpg)
![Создание сайта в фотошопе за 10 минут! Создание сайта в фотошопе за 10 минут!](/uploads/posts/2010-06/1277410651_17.jpg)
![Создание сайта в фотошопе за 10 минут! Создание сайта в фотошопе за 10 минут!](/uploads/posts/2010-06/1277410612_18.jpg)
![Создание сайта в фотошопе за 10 минут! Создание сайта в фотошопе за 10 минут!](/uploads/posts/2010-06/1277410670_19.jpg)
Мой результат:
Затем с помощью инструмента Type tool я добавлю ссылки для навигации:
Затем я выбираю инструмент Line Tool и создаю эту фигуру, используемую для навигации.
![Создание сайта в фотошопе за 10 минут! Создание сайта в фотошопе за 10 минут!](/uploads/posts/2010-06/1277410594_22.jpg)
С помощью инструмента Rectangle tool я добавляю эту фигуру (она используется для поиска) и применяю эти настройки стиля слоя Layer styles:
![Создание сайта в фотошопе за 10 минут! Создание сайта в фотошопе за 10 минут!](/uploads/posts/2010-06/1277410657_24.jpg)
Я также использую картинку увеличительного стекла для нашей секции Freebies Section
Мой результат:
Навигация почти закончена, но я хотел бы научить Вас уловке, которая сделает нашу навигационную панель лучше.
Выбираем инструмент Ellipse Tool и создаем фигуру вне навигационной панели (чтобы сделать это, Вы должны будете удостовериться, что слой с кругом находится под навигационной панелью в наборе слоев Layer palette).
Я создам первую фигуру слева – это чёрная фигура.
![Создание сайта в фотошопе за 10 минут! Создание сайта в фотошопе за 10 минут!](/uploads/posts/2010-06/1277410641_26.jpg)
Затем я применяю эти настройки стиля слоя Layer styles:
![Создание сайта в фотошопе за 10 минут! Создание сайта в фотошопе за 10 минут!](/uploads/posts/2010-06/1277410609_27.jpg)
![Создание сайта в фотошопе за 10 минут! Создание сайта в фотошопе за 10 минут!](/uploads/posts/2010-06/1277410672_28.jpg)
А это мой результат:
![Создание сайта в фотошопе за 10 минут! Создание сайта в фотошопе за 10 минут!](/uploads/posts/2010-06/1277410674_29.jpg)
Я обработаю таким же образом правую часть.
Вот мой окончательный результат для навигационной панели:
Затем я буду создавать область для содержимого, которая делается очень просто. Сначала берем инструмент Rectangle Tool и создаем эту фигуру, используя цвет #488eae
Затем с помощью инструмента Rectangle tool создаем небольшую область слева, используем цвет #5eb3d9
Теперь с помощью инструмента Pen Tool я делаю ту же вещь, которую сделал для навигационной панели (я создам скругленные углы)
![Создание сайта в фотошопе за 10 минут! Создание сайта в фотошопе за 10 минут!](/uploads/posts/2010-06/1277410605_33.jpg)
Затем используем инструмент Ellipse Tool и создаем фигуру вне области голубой фигуры (чтобы сделать это, мы должны удостовериться, что наш слой с кругом находится под слоем с голубой фигурой в наборе слоев Layer palette). Используем цвет # 3a6a80
![Создание сайта в фотошопе за 10 минут! Создание сайта в фотошопе за 10 минут!](/uploads/posts/2010-06/1277410597_34.jpg)
И, используя инструмент Type tool, добавляем изображения и текст.
Затем я создаю таким же образом боковую часть, но вместо текста я вставляю баннеры на «Рекламную площадь» и несколько изображений для Flickr Group.
Это мой окончательный результат урока создания сайта за 10 минут. Как вам? :
Теперь можете выключить свой секундомер и посмотреть, что создание этого макета в фотошопе заняло у Вас не больше 10 минут.
Переведено для https://photoshoplove.ru/
Оригинал урока фотошопа http://trendytuts.coml