Простой серый дизайн сайта

Если Вы нашли неточность в переводе, ошибку или считаете, что содержание данного шага не совсем точное – используйте функцию «Изменить», чтобы внести свои изменения.

*Ваши изменения будут отправлены администрации на модерирование.
*Поля "Имя" и "Комментарий" не обязательны.

Конечный результат:

Изменить

1. Создайте новый документ размером 800х800 пикселей с белым фоном. Разблокируйте фоновый слой (кликните дважды на нём) и примените к нему стиль Наложение градиента (Layer Style - Gradient Overlay):

Режим – Умножение, Стиль – Радиальный

Изменить

2. Инструментом Прямоугольная область (Rectangular Marquee Tool) создайте две 1-пиксельные линии разных цветов на всю ширину холста:

Изменить

3. Создайте фигуру инструментом Прямоугольник с закруглёнными краями (Rounded Rectangle Tool), потом инструментом Прямоугольная область (Rectangular Marquee Tool) обрежьте её нижнюю часть, чтобы внизу углы были острыми. Назовите этот слой “navigation”. Примениие к нему такие стили в меню Стилей слоя (Layer Style - Blending Options):

Отбрасывание тени (Режим – Умножение):

Изменить

Наложение градиента (Режим – Нормальный, Стиль – Линейный):

Изменить

Обводка ( Положение – Снаружи, Режим – Нормальный, Тип обводки – Градиент, Стиль – Зеркальный):

Изменить

Расположите обрезанный прямоугольник, как показано ниже:

Изменить

4. Создайте новый документ с прозрачным фоном размером 4х4 пикселя. Инструментом Карандаш (Pencil Tool) нарисуйте узор, показанный ниже.

Изменить

5. Перейдите в меню Редактирование»Определить узор (Edit > Define Pattern) и сохраните ваш узор. Вернитесь в основной документ, сделайте выделение слоя с прямоугольником (Ctrl+Click), создайте новый слой (Create New Layer) и залейте выделение сохранённым узором, используя инструмент Заливка (Paint Bucket Tool). Установите Режим наложения этого слоя – Перекрытие (Blending Mode – Overlay) и Непрозрачность – 25%.

Изменить

6. Инструментами Прямоугольная область (Rectangular Marquee Tool) и Овальная область (Elliptical Marquee Tool) создайте простое свечение на этой фигуре.

Изменить

7. Добавьте заголовок сайта, логотип, слоган, навигационный текст и область поиска:

Изменить

8. Инструментом Прямоугольник с закруглёнными краями (Rounded Rectangle Tool) создайте большую фигуру, как показано ниже.

Изменить

9. Примените к ней такие стили слоя:

Отбрасывание тени (Режим – Умножение):

Изменить

Наложение градиента (Режим – Нормальный, Стиль – Линейный):

Изменить

Обводка (Положение – Снаружи, Режим – Нормальный, Тип обводки – Градиент, Стиль – Линейный):

Изменить

10. Внутри большого прямоугольника создайте ещё один:

Изменить

11. Примените к нему стиль Наложение градиента (Layer Style - Gradient Overlay):

Режим – Нормальный, Стиль – Линейный

Изменить

12. В середине большого серого прямоугольника создайте две 1-пиксельные линии, как мы делали это ранее. Можете затереть края линий, используя маску слоя или ластик.

Изменить

13. Добавьте контент:

Изменить

14. Создайте ещё один прямоугольник ниже:

Изменить

15. Примените к нему такие же стили, как и к большому. Потом заполните его нужным контетом:

Изменить

16. Стрелки можете найти в стандартном наборе фигур. Скопируйте навигационную панель вниз и заполните её информацией футера:

Изменить

Ссылка на источник урока

Создан: 4 апреля 2010

http://s41.radikal.ru/i091/1005/0e/c53729ab5ae9.png

---------------

31 мая 2010 08:39 | ICQ: -- | [цитировать]

Как на 6 шаге создать свечение?

---------------

5 сентября 2010 07:42 | ICQ: -- | [цитировать]

В новом слое над узором создайте выделение на половину чёрного прямоугольника, залейте белым цветом и понизьте Непрозрачность слоя. у вас будет бледно-белое свечение. Сделайте это с двумя инструментами выделения.

---------------
ПОДПИСЬ

5 сентября 2010 13:53 | ICQ: -- | [цитировать]

На 3-м шаге как инструментом Прямоугольная область (Rectangular Marquee Tool) обрезать нижнюю часть прямоугольника с закруглёнными краями? Никак не получается. После выделения что делать?

---------------

7 сентября 2010 21:33 | ICQ: -- | [цитировать]

Delete нажать. важно находиться на слое той фигуры, которую нужно обрезать.

---------------
ПОДПИСЬ

8 сентября 2010 14:07 | ICQ: -- | [цитировать]

На слое с фигурой инструментом Прямоугольная область (Rectangular Marquee Tool) выделяю нижнюю часть прямоугольника, которую надо обрезать.
Нажимаю Delete - удаляется весь слой с фигурой. Что не так?

---------------

10 сентября 2010 00:06 | ICQ: -- | [цитировать]

Растеризуйте слой с фигурой, которую обрезаете. Правый клик на слое в паилитре слоёв и выберите там нужный пункт

---------------
ПОДПИСЬ

10 сентября 2010 02:01 | ICQ: -- | [цитировать]