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

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

designlessons.ru

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

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

И в Твиттере: twitter.com/DesignLessons