![Подводный дизайн сайта: сайт для дайвинг-центра - уроки фотошоп Подводный дизайн сайта: сайт для дайвинг-центра - уроки фотошоп](/uploads/2011/06/ramka23.jpg)
В этом уроке я покажу вам, как создать подводный дизайн сайта, который с удовольствием будут использовать дайвинг-центры, бассейны и другие любители водного спорта. Берите идею на вооружение!
Сложность: низкая
Время: до 1 часа
Навыки для "прокачки":
- работа с режимами наложения
- работа со стилями слоя
- работа с вектором в Фотошопе
Мы продолжаем наше путешествие по урокам web дизайна. Для повторения урока скачайте бесплатно
фото под водойТакже скачайте в высоком разрешении
брызги водыИтак, начнем.
1. Первое, что мы сделаем, это создадим новый документ 1100 1020.
![Подводный дизайн сайта: сайт для дайвинг-центра - уроки фотошоп Подводный дизайн сайта: сайт для дайвинг-центра - уроки фотошоп](/uploads/2011/06/image00120.jpg)
2. Затем мы создадим фон для нашего шаблона. Вам понадобиться фото воды, которое вы можете скачать в начале урока. Откройте его и измените его размер, чтобы он соответствовал вашему документу.
![Подводный дизайн сайта: сайт для дайвинг-центра - уроки фотошоп Подводный дизайн сайта: сайт для дайвинг-центра - уроки фотошоп](/uploads/2011/06/image00319.jpg)
3. Используя инструмент Прямоугольник со скругленными углами = Rounded Rectangle Tool, радиусом 10px, сделайте прямоугольник примерно как на картинке ниже. Назовем этот слой “Содержание”. Поместите его в центр вашего документа (см. заключительный результат, если вам это нужно).
![Подводный дизайн сайта: сайт для дайвинг-центра - уроки фотошоп Подводный дизайн сайта: сайт для дайвинг-центра - уроки фотошоп](/uploads/2011/06/image00518.jpg)
4. Добавим стили слоя, слою “Содержание”.
![Подводный дизайн сайта: сайт для дайвинг-центра - уроки фотошоп Подводный дизайн сайта: сайт для дайвинг-центра - уроки фотошоп](/uploads/2011/06/image00721.jpg)
![Подводный дизайн сайта: сайт для дайвинг-центра - уроки фотошоп Подводный дизайн сайта: сайт для дайвинг-центра - уроки фотошоп](/uploads/2011/06/image01119.jpg)
![Подводный дизайн сайта: сайт для дайвинг-центра - уроки фотошоп Подводный дизайн сайта: сайт для дайвинг-центра - уроки фотошоп](/uploads/2011/06/image00920.jpg)
![Подводный дизайн сайта: сайт для дайвинг-центра - уроки фотошоп Подводный дизайн сайта: сайт для дайвинг-центра - уроки фотошоп](/uploads/2011/06/image01218.jpg)
5. Уменьшите Непрозрачность = Opacity этому слою до 15%
![Подводный дизайн сайта: сайт для дайвинг-центра - уроки фотошоп Подводный дизайн сайта: сайт для дайвинг-центра - уроки фотошоп](/uploads/2011/06/image01414.jpg)
6. Следующим шагом будет добавление брызг. Для этого потребуются фото. Вы можете скачать их в начале урока, они были подготовлены для этого урока. Первое, что мы должны сделать, это открыть файл с названием "splash1.jpg". Это будет выглядеть примерно так:
![Подводный дизайн сайта: сайт для дайвинг-центра - уроки фотошоп Подводный дизайн сайта: сайт для дайвинг-центра - уроки фотошоп](/uploads/2011/06/image01610.jpg)
7. Для начала мы должны обесцветить наше изображение, прежде чем добавим его в наш шаблон. Для этого нажмите Ctrl + Shift + U, и оно станет черно-белым. Нам не нужно все изображение, поэтому с помощью инструмента Лассо = Lasso Tool и растушевкой около 10px, сделайте выделение как на картинке ниже, а затем перетащите его в свой документ.
![Подводный дизайн сайта: сайт для дайвинг-центра - уроки фотошоп Подводный дизайн сайта: сайт для дайвинг-центра - уроки фотошоп](/uploads/2011/06/image01711.jpg)
8. Это изображение намного больше, чем наш шаблон, нам необходимо его уменьшить. Затем, поместим его в правом верхнем углу, нашего шаблона.
![Подводный дизайн сайта: сайт для дайвинг-центра - уроки фотошоп Подводный дизайн сайта: сайт для дайвинг-центра - уроки фотошоп](/uploads/2011/06/image01811.jpg)
9. Измените режим наложения слоя на Экран = Screen
![Подводный дизайн сайта: сайт для дайвинг-центра - уроки фотошоп Подводный дизайн сайта: сайт для дайвинг-центра - уроки фотошоп](/uploads/2011/06/image01911.jpg)
10. Нам не нужно, чтобы наше окно было покрыто водой, нужны только, небольшие пузырьки. Для этого нажмите на иконку, Добавить слой-маску = Layer Mask, в палитре слоев. Затем используя мягкую кисть черного цвета, замаскируем некоторые элементы изображения. Убедитесь, что вы рисуете на маске, а не на самом слое. Если вы раньше просматривали уроки web дизайна, то для вас это будет проще, простого. У вас должно получиться, примерно это.
![Подводный дизайн сайта: сайт для дайвинг-центра - уроки фотошоп Подводный дизайн сайта: сайт для дайвинг-центра - уроки фотошоп](/uploads/2011/06/image02011.jpg)
11. Для левой стороны, просто продублируем этот же слой всплеска, уменьшим его немного, так чтобы он не выглядел точно так же, и выполним действия из шага 10.
У нас получился следующий результат.
![Подводный дизайн сайта: сайт для дайвинг-центра - уроки фотошоп Подводный дизайн сайта: сайт для дайвинг-центра - уроки фотошоп](/uploads/2011/06/image02110.jpg)
12. Пришло время открыть изображение "splash2.jpg". Мы должны, выполнить те же действия, используемые в 6 и 7 шаге. Но на этот раз наши Splash2 будут размещены в нижней, левой части нашего шаблона (не забудьте изменить режим наложения слоя, на Экран = Screen)
![Подводный дизайн сайта: сайт для дайвинг-центра - уроки фотошоп Подводный дизайн сайта: сайт для дайвинг-центра - уроки фотошоп](/uploads/2011/06/image0228.jpg)
13. Используя Шаг 10, нам нужно, замаскировать некоторые элементы, пока мы не получим следующее.
![Подводный дизайн сайта: сайт для дайвинг-центра - уроки фотошоп](http://files.</div>
<p>Сайт: <a href=)
designlessons.ru
Виджет на Яндексе: yandex.ru/?add=111794
Мы ВКонтакте:
И в Твиттере: twitter.com/DesignLessons