Рекомендуем ознакомиться со следующими разделами Фотошопа:

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

Сложность: низкая
Время: до 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, нам нужно, замаскировать некоторые элементы, пока мы не получим следующее.

14. Мы почти закончили с нашими брызгами! Для нашего следующего всплеска, откроем изображение "Splash3.jpg". Вы заметили, что это изображение имеет белый фон, на котором слой маска не будет работать, как с черным фоном. Поэтому, мы должны изменить фон, на черный, чтобы мы могли достичь того же эффекта.

15. Первое, что мы сделаем, это обесцветим наше изображение Ctrl + Shift + U. Затем мы, инвертируем его. Для этого необходимо нажать, Ctrl + I. Мы можем сделать выбор желаемого всплеска, а затем поместить его на наш документ таким же образом (не забудьте изменить режим смешивания на Экран = Screen).

16. Так же, как в шаге 10 мы хотим, скрыть некоторые детали всплеска. После тех же самых шагов, наше изображение выглядит следующим образом.

17. Затем повторим процесс, используемый в 14-16 шагах с нашим финальным изображением всплеска (Splash4.jpg). У вас должно получиться, что-то вроде этого.

18. Давайте создадим наше навигационное меню. Активируйте слой “Содержание” в палитре слоев и нажмите Ctrl + клик по миниатюре слоя, чтобы создать выделение. На новом слое выше всех остальных, заполните выделение черным цветом.

19. Используйте Прямоугольное выделение = Rectangle Marquee Tool, для того чтобы, выделить нижнюю половину вновь созданного прямоугольника, и перейдите Редактирование-> Очистить = Edit-> Clear. Это будет выглядеть примерно так. Назовите этот слой “Навигация”

20. Добавим стили слоя.

21. Измените Непрозрачность (Opacity) этого слоя на 80%, и у вас получиться что-то вроде этого.

22. Для наших ссылок мы будем использовать простой шрифт. В уроке используется Myriad Pro, цвет белый.

23. На нашей активной ссылке сделаем своего рода “Свечение”. Чтобы добиться этого, используйте мягкую Кисть (Brush Tool) цвет  # 8CFBFF.

24. Измените Непрозрачность (Opacity) примерно до 61%, а затем инструментом Прямоугольное выделение = Rectangle Marquee Tool, выделите и удалите нижнюю половину вашего свечения. Это будет выглядеть примерно так.

25. Давайте перейдем к нашим крючкам. Первое, что нам нужно сделать, это создать отверстие для нашего крючка. Используя инструмент, Овальная область = Elliptical Marquee Tool, сделайте выделение как на картинке ниже и залейте его цветом # 192932.

26. Добавим стиль слоя, нашим отверстиям.

27. Время для крючка. Используя инструмент, Перо = Pen Tool в режиме Контуры, создайте путь, как на картинке ниже.

28. Установите жесткую Кисть (Brush Tool) 2px черного цвета и выберите, перейдя для этого в палитру Контуры, значок внизу, Выполнить обводку контура кистью.

29. Добавим следующие стили слоя.

30. Последнее, что мы сделаем - это выделение, прежде, чем мы добавим нити, к нашему слою крючки, для того чтобы казалось, как будто крючок, проходит сквозь дыру. Для этого используйте Прямолинейное Лассо = Polygonal Lasso Tool, чтобы сделать выделение, как на картинке ниже.

31. Инвертируем выделение, Выделение-> Инверсия = Select> Inverse, а затем выберите иконку, Добавить слой маску = Layer Mask в нижней части палитры слоев.

32. Теперь пришло время для нити. Для этого нам нужен инструмент Перо = Pen Tool, еще раз. Сделаем путь, подобный следующему.

33. Затем мы должны убедиться, что настройки Кисти (Brush Tool) 2 пикселя, и цвет переднего плана белый. Затем на новом слое добавляем обводку пути,  перейдите для этого в палитру Контуры, и выберите значок внизу, Выполнить обводку контура кистью. У вас будет что-то, похожее как на картинке ниже:

34. Добавьте стиль слоя.

35. Все что вам нужно, это сделать то же самое с правой стороны, и ваш документ будет выглядеть примерно так.

36. Теперь мы добавим окна для содержания, используя инструмент Прямоугольник со скругленными углами = Rounded Rectangle Tool цвет переднего плана # 79B5F5.

37. Последнее, что нужно сделать, это создать "левую" и "правую" кнопку. Используя Прямоугольник со скругленными углами = Rounded Rectangle снова с радиусом 5 пикселей.

38. Добавьте следующие стили слоя к слою:

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

Автор: Matthew Heidenreich
Ссылка на источник:  http://devisefunction.com
Перевод: Артеменко Люба