ресурс для начинающих веб-разработчиков
комплексные веб-услуги по созданию сайтов

Справочный материал по основным языкам программирования и верстки сайтов.

Готовая методика создания простых и сложных динамичных сайтов, с использованием PHP и MySQL.

Использование веб-редактора Adobe Dreamweaver в разработке сайтов.

Использование графических редакторов Adobe Flash, Adobe Photoshop, Adobe Fireworks в подготовке веб-графики.

Разработка веб-сайтов под "ключ".

Разработка отдельных фрагментов сайтов, консультации по вопросам верстки веб-страниц и веб-программирования.

Создание текстуры деревянной доски

Создание текстуры деревянной доски

Перейдем к темам создания рисунков в Photoshop, которые часто используются в оформлении веб-сайтов. Этот и последующие два урока будут посвящены созданию рисунков компакт-дисков и упаковке к ним. Прежде чем перейти к созданию самого изображения компакт-диска, остановимся на создании текстуры, на фоне которой он будет изображен. Текстура будет представлять из себя набор деревянных досок.

Откроем Photoshop и создадим новый документ Файл ⇒ Создать.

Параметры нового документа

Создадим новый слой Слои ⇒ Новый или Shift + Ctrl +N или щелкнем по пиктограмме на панели слои Создать новый слой и зальем его коричневым цветом #f0672b.

Выбор палитры цветов

Общий вид холста

Теперь откроем в меню Фильтр ⇒ Шум ⇒ Добавить шум. Появится диалоговое окно Добавить шум. Установим параметры фильтра как указано на рисунке.

Параметры фильтра Добавить шум

Теперь откроем в этом в этом же меню Фильтр ⇒ Размытие ⇒ Размытие в движении. Откроется диалоговое окно Размытие в движении. Установим параметры фильтра как указано на рисунке.

Параметры фильтра Размытие в движнии

Рисунок примет следующий вид.

Рисунок после применения фильтров

Теперь сделаем рисунок однородным. Для этого в меню Редактирование ⇒ Трансформирование ⇒ Маштабирование примененим маштабирование как показано на рисунке и нажмем на пиктограмму Выполнить маштабирование на панели Опции.

Маштабирование

Теперь с помощью инструмента Прямоугольная область выделим часть рисунка.

Параметры инструмента Прямоугольная область

Выделение прямоугольной области

Перейдем в меню Редактирование ⇒ Скопировать совмещенные данные и далее Редактирование ⇒ Вставить. Появится новый слой Слой 2. Уберите видимость со Слой 1. Рисунок будет выглядеть так.

Рисунок после копирования выделенной области и удаления видимости со слоя Слой 1

Теперь сделаем следующее. Нажмем клавишу Ctrl и щелкним мышью по слою Слой 2. Прямоугольная область будет выделена. Перетянем ее с помощью мыши ниже прямоугольника.

Перетянутая выделенная область

Откроем видимость слоя Слой 1.

Рисунок после открытия слоя Слой1

Перейдем в меню Редактирование ⇒ Скопировать совмещенные данные и далее Редактирование ⇒ Вставить. Появится новый слой Слой 3.

Закроем видимость слоя Слой 1.

Рисунок после создания слоя Слой 3

Теперь повторим тоже, что делали ранее. Нажмем клавишу Ctrl и щелкнем по слою Слой 3 и перетянем выделенную область ниже прямоугольника. Откроем видимость слоя Слой 1. Перейдем в меню Редактирование ⇒ Скопировать совмещенные данные и далее Редактирование ⇒ Вставить. Появится новый слой Слой 4. И так далее, пока не заполним все изображение прямоугольниками

В итоге должно получится так.

После вставки прямоугольных областей

Теперь выделим слой Слой 6 и применим к нему стиль Тиснение.

Параметры стиля Тиснение

Рисунок примет следующий вид.

Рисунок после применения стиля Тиснение

Наведем курсор мыши на слой Слой 6 и щелкнем правой кнопкой мыши. Появится контекстное меню. Выберем пункт Скопировать стиль слоя.

Контестное меню панели слои

Теперь выделим все слои со Слой 2 по Слой 7, вызовем контекстное меню и щелкнем кнопкой мыши по пункту Вклеить стиль слоя.

Копирование слоя Слой 6

Рисунок примет следующий вид.

Рисунок после копирования слоя Слой 6

Объединим слои со Слой 1 по Слой 7, нажав клавиши Ctrl+E. Создадим новый слой, щелкнув по пиктограмме Создать новый слой. Применим к новому слою Фильтр ⇒ Рендеринг⇒ Облака для придания разнородности структуре дерева. Рисунок примет следующий вид.

Нрисунок после применения фильтра Облака

Теперь с помощью маштабирования изменим структуру фильтра раздвинув маркеры горизонально и вертикально и установим Непрозрачность слоя 25%.

Применение маштабирования к фильтру

Рисунок примет следующий вид.

Рисунок после применения фильтра

Теперь произведем коррекцию рисунка, используя Новый корректирующий слой Кривые.

Рисунок после использования корректирующего слоя Кривые

Добавим еще немного контрастности.

Корректирующий слой Яркость/Контрастность

В итоге должен получиться вот такой рисунок.

Итоговый рисунок

Сохраним его в формате psd.