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

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

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

Сложность: низкая Время: до 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 Перевод: Артеменко Люба

Комментариев 4

  1. Офлайн
    Yara 3 июля 2011 21:00
    + 0 -
    Там 2 зип-файла, у меня все ссылки на их скачку работают. Каким браузером пользуетесь?
  2. Офлайн
    Дмитрий
    Дмитрий 3 июля 2011 06:19
    + 0 -
    Фотография с подводным миром не скачивается
  3. Офлайн
    Владислав
    Владислав 2 марта 2012 19:03
    + 0 -
    А у тебя фаил этоого дизайна готового есть?
  4. Офлайн
    Yara 2 марта 2012 19:18
    + 0 -
    Возможно, у автора есть: http://devisefunction.com/2010/03/09/underwater-content-box-design-in-photoshop/

Добавить комментарий

Кликните на изображение чтобы обновить код, если он неразборчив
  • Яндекс.Метрика