Подводный дизайн сайта: сайт для дайвинг-центра
Нравится(+) 0 Не нравится(-)

Подводный дизайн сайта: сайт для дайвинг-центра - уроки фотошоп


В этом уроке я покажу вам, как создать подводный дизайн сайта, который с удовольствием будут использовать дайвинг-центры, бассейны и другие любители водного спорта. Берите идею на вооружение!


Сложность: низкая
Время: до 1 часа


Навыки для "прокачки":
- работа с режимами наложения
- работа со стилями слоя
- работа с вектором в Фотошопе


Мы продолжаем наше путешествие по урокам web дизайна. Для повторения урока скачайте бесплатно фото под водой
Также скачайте в высоком разрешении брызги воды

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

1. Первое, что мы сделаем, это создадим новый документ 1100 1020.

Подводный дизайн сайта: сайт для дайвинг-центра - уроки фотошоп

2. Затем мы создадим фон для нашего шаблона. Вам понадобиться фото воды, которое вы можете скачать в начале урока. Откройте его и измените его размер, чтобы он соответствовал вашему документу.

Подводный дизайн сайта: сайт для дайвинг-центра - уроки фотошоп

3. Используя инструмент Прямоугольник со скругленными углами = Rounded Rectangle Tool, радиусом 10px, сделайте прямоугольник примерно как на картинке ниже. Назовем этот слой “Содержание”. Поместите его в центр вашего документа (см. заключительный результат, если вам это нужно).

Подводный дизайн сайта: сайт для дайвинг-центра - уроки фотошоп

4. Добавим стили слоя, слою “Содержание”.

Подводный дизайн сайта: сайт для дайвинг-центра - уроки фотошоп

Подводный дизайн сайта: сайт для дайвинг-центра - уроки фотошоп

Подводный дизайн сайта: сайт для дайвинг-центра - уроки фотошоп

Подводный дизайн сайта: сайт для дайвинг-центра - уроки фотошоп

5. Уменьшите Непрозрачность = Opacity этому слою до 15%

Подводный дизайн сайта: сайт для дайвинг-центра - уроки фотошоп

6. Следующим шагом будет добавление брызг. Для этого потребуются фото. Вы можете скачать их в начале урока, они были подготовлены для этого урока. Первое, что мы должны сделать, это открыть файл с названием "splash1.jpg". Это будет выглядеть примерно так:

Подводный дизайн сайта: сайт для дайвинг-центра - уроки фотошоп

7. Для начала мы должны обесцветить наше изображение, прежде чем добавим его в наш шаблон. Для этого нажмите Ctrl + Shift + U, и оно станет черно-белым. Нам не нужно все изображение, поэтому с помощью инструмента Лассо = Lasso Tool и растушевкой около 10px, сделайте выделение как на картинке ниже, а затем перетащите его в свой документ.

Подводный дизайн сайта: сайт для дайвинг-центра - уроки фотошоп

8. Это изображение намного больше, чем наш шаблон, нам необходимо его уменьшить. Затем, поместим его в правом верхнем углу, нашего шаблона.

Подводный дизайн сайта: сайт для дайвинг-центра - уроки фотошоп

9. Измените режим наложения слоя на Экран = Screen

Подводный дизайн сайта: сайт для дайвинг-центра - уроки фотошоп

10. Нам не нужно, чтобы наше окно было покрыто водой, нужны только, небольшие пузырьки. Для этого нажмите на иконку, Добавить слой-маску = Layer Mask,  в палитре слоев. Затем используя мягкую кисть черного цвета, замаскируем некоторые элементы изображения. Убедитесь, что вы рисуете на маске, а не на самом слое. Если вы раньше просматривали уроки web дизайна, то для вас это будет проще, простого. У вас должно получиться, примерно это.

Подводный дизайн сайта: сайт для дайвинг-центра - уроки фотошоп

11. Для левой стороны, просто продублируем этот же слой всплеска, уменьшим его немного, так чтобы он не выглядел точно так же, и выполним действия из шага 10.
У нас получился следующий результат.

Подводный дизайн сайта: сайт для дайвинг-центра - уроки фотошоп

12. Пришло время открыть изображение "splash2.jpg". Мы должны, выполнить те же действия, используемые в 6 и 7 шаге. Но на этот раз наши Splash2 будут размещены в нижней, левой части нашего шаблона (не забудьте изменить режим наложения слоя,  на Экран = Screen)

Подводный дизайн сайта: сайт для дайвинг-центра - уроки фотошоп

13. Используя Шаг 10, нам нужно, замаскировать некоторые элементы, пока мы не получим следующее.

Stadion-Kuban.ru

Виджет на Яндексе: yandex.ru/?add=111794

Мы ВКонтакте:

И в Твиттере: twitter.com/Stadion-Kuban

Информация
Автор / Разработчик
Автор не указан
Перевел
Автор перевода не указан
Сложность
Легкая
Источник
Источник не указан
Добавил
Yara
Дата
26-06-2020, 21:19
Метки:  еще статьи

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

Прямая ссылка:
BB-code ссылка:
HTML ссылка:

Комментарии (0)

Имя
Эл. почта
Комментарий
Вопрос: 1 + 1 =

Для активации данной функции необходимо зарегистрироваться и авторизоваться на сайте.

Ваш IP: 207.241.237.222
Последние уроки
Опубликовано 14-10-2020, 21:33
Опубликовано 13-10-2020, 20:50
Опубликовано 11-10-2020, 11:28
Опубликовано 7-10-2020, 20:00
Опубликовано 25-09-2020, 19:33
Опубликовано 24-09-2020, 18:42
Архив сайта
.