Главная
Все для дизайна - уроки фотошоп.
Войти / Регистрация
Забыл пароль?Регистрация
Photoshop
3D эффекты Анимация более 1 часа до 1 часа до 30 минут Имитации
Интерфейсы Коллаж Концептуальные Обработка фото Пейзаж Плакаты и фоны Элементы и текст Простые уроки Реальные объекты Реклама Ретушь и лицо Рисование силуэты, люди, здания Явления природы Сложные уроки Спецэффекты Средние уроки Трюки Фотошоп Фильтры Фотошоп с нуля Illustrator

Создание сайта-портфолио или сайта услуг фотографа и дизайнера
Нравится(+) 0 Не нравится(-)

Создание сайта-портфолио или сайта услуг фотографа и дизайнера - уроки фотошоп


Создайте дизайн  сайта за 15 минут! К этому уроку веб дизайна прилагается бесплатный макет с готовыми элементами для сайта.


сложность: средняя


Время: до 30 минут

Навыки для "прокачки":


- создание макета на основе готовых элементов
- работа с многослойным документом
- создание векторных фигур
- копирование элементов между документами Фотошоп

Для уроков от среднего уровня и выше: если возникают вопросы по используемым в уроках инструментам, рекомендуем пройти курс "Фотошоп с нуля".


 Файл PSD для повторения урока


Шаг 1

Перейдите в меню Файл> Новый File> New, чтобы создать документ. Введите значения и нажмите кнопку ОК.

Создание сайта-портфолио или сайта услуг фотографа и дизайнера - уроки фотошоп

Шаг 2

Для создания меню мы откроем файл Радуга-UI-Kit-pro.psd и перетянем в файл  Черное меню. Возьмите инструмент Перемещение (Move Tool), чтобы передвинуть его в верхний левый угол макета.

Создание сайта-портфолио или сайта услуг фотографа и дизайнера - уроки фотошоп

Если у вас меню не на всю ширину макета, увеличьте его ширину с помощью инструмента Свободная трансформация (Free transform = Ctrl+T). Добавьте одну или несколько значков, которые будут ссылками на социальные сети.

Создание сайта-портфолио или сайта услуг фотографа и дизайнера - уроки фотошоп

Создание сайта-портфолио или сайта услуг фотографа и дизайнера - уроки фотошоп

Шаг 3

В этом шаге мы займемся  созданием "карусели" (слайдера).  Создайте новую группу с именем "карусель" через меню Слой> Группа (Layer> New> Group). Создайте в группе слой при помощи Прямоугольной форры (Rectangle Tool (U)). Размер прямойгольника (1000x290px) цвета # f2f6f7. С помощью Перемещения (Move Tool (V)), поместите прямоугольник в меню.

Создание сайта-портфолио или сайта услуг фотографа и дизайнера - уроки фотошоп

Используйте Инструмент текст Text Tool (T), чтобы добавить на ваш сайт заголовок. Например, шрифтом Helvetica Bold размером 61px. Можно найти его в файле Rainbow UI Kit.

Создание сайта-портфолио или сайта услуг фотографа и дизайнера - уроки фотошоп

Из этого же файла можно взять другие элементы. Вы можете легко редактировать их под свои задачи.

Создание сайта-портфолио или сайта услуг фотографа и дизайнера - уроки фотошоп

Возьмите Прямоугольник со скругленными углами (Rounded Rectangle Tool (U)) с радиусом 3 пикселя. Создайте новый прямоугольник (200px X 50px) цвета # 2a6db4. Создайте второй прямоугольник цвета # a2a6ab. Используйте Инструмент текст (Text Tool (T)), чтобы добавить названия для двух кнопок. С помощью Перемещения (Move Tool) поместите их по центру документа.

Создание сайта-портфолио или сайта услуг фотографа и дизайнера - уроки фотошоп

Скопируйте и вставьте кнопку стилей из файла Rainbow UI Kit, а также стили текста и примените по своему усмотрению к кнопками.

Создание сайта-портфолио или сайта услуг фотографа и дизайнера - уроки фотошоп

Чтобы создать стрелки слева и справа от "карусели", сделайте новую группу "Arrow left". Используйте инструмент Эллипс (Ellipse Tool (U)), чтобы создать круг (50x50px) черного цвета.

Создание сайта-портфолио или сайта услуг фотографа и дизайнера - уроки фотошоп

Сами стрелки можно скопировать в скачанном файле. Уменьшите их размер, если это необходимо.

Создание сайта-портфолио или сайта услуг фотографа и дизайнера - уроки фотошоп

Теперь выберите группу “Arrow Left” уменьшите ее Непрозрачность (Opacity) до 10%.

Создание сайта-портфолио или сайта услуг фотографа и дизайнера - уроки фотошоп

Дублируйте эту группу и переименуйте "Arrow right". Затем перейдите в меню Редактирование> Трансформация> Трансформировать по горизонтали (Edit> Transform> Flip Horisontal). С помощью Перемещения (Move Tool) поместите стрелку на правой стороне карусели.

Создание сайта-портфолио или сайта услуг фотографа и дизайнера - уроки фотошоп

Шаг 4

Создадим блок для размещения информации о некоторых услугах вашего сайта. Это легко сделать, используя файл Rainbow.
Создайте группу "Services". Используйте инструмент Прямоугольник со скругленными углами (Rounded Rectangle Tool (U)), чтобы создать серый прямоугольник # d6dde1  размером 770px X 300px.

Создание сайта-портфолио или сайта услуг фотографа и дизайнера - уроки фотошоп

Перетащите из  файла ленту а затем увеличьте ее его ширину до ширины серого прямоугольника.

Создание сайта-портфолио или сайта услуг фотографа и дизайнера - уроки фотошоп

Создайте три новых группы с названиями box1, box2 и box3, и 3 круга в них используя инструмент Овал (Ellipse Tool (U)). Переместите их равномерно по всей ширине серого прямоугольника.

Создание сайта-портфолио или сайта услуг фотографа и дизайнера - уроки фотошоп

Добавьте иконки в каждом круге (вы можете скачать некоторые из них на сайте iconfinder.com) и добавьте текстовые описания.

Создание сайта-портфолио или сайта услуг фотографа и дизайнера - уроки фотошоп

Шаг 5

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

Создание сайта-портфолио или сайта услуг фотографа и дизайнера - уроки фотошоп

Шаг 6

Импортируем нижний колонтитул из файла Rainbow.

Создание сайта-портфолио или сайта услуг фотографа и дизайнера - уроки фотошоп

Также импортируем правую колонку новостей в Rainbow UI Kit.

Создание сайта-портфолио или сайта услуг фотографа и дизайнера - уроки фотошоп

Вы создали веб дизайн портфолио всего за 10-15 минут! Многие элементы, скопированные в рабочий файл, мы рекомендуем изучить самостоятельно (все стили слоя для них сохранены в оригинальном виде - это поможет понять, на основе каких стилей они созданы).

Создание сайта-портфолио или сайта услуг фотографа и дизайнера - уроки фотошоп

Оставляйте свои комментарии и лайки!
Информация
Автор / Разработчик
Автор не указан
Перевел
Автор перевода не указан
Источник
Добавил
Yara
Дата
16-04-2020, 22:12
Метки:  Жалоба еще статьи

Поделиться ссылкой

Создание сайта-портфолио или сайта услуг фотографа и дизайнера
Социальне сети:
Прямая ссылка:
BB-code ссылка:
HTML ссылка:

Комментарии

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


Последние уроки
Опубликовано 21-05-2020, 14:55
Архив сайта
Теги