Design resources

В этом уроке мы сделаем пазл из фото с помощью Фотошопа. Для этого будем использовать чудную фотку малыша.

Шаг 1. Открываем фото в Фотошопе (Ctrl+N) и дублируем слой с фотографией на Панели Слоев, нажав Ctrl+J (это один из возможных вариантов получения копии слоя). Появившийся слой автоматически будет называться «Layer 1», переименовываем его для удобства в «Puzzle».

Шаг 2. Создаем новый слой, для этого нажимаем на соответсвующую кнопочку на Панели Инструментов (см. рисунок), удерживая Ctrl (чтобы слой появился под тем на которым сейчас мы находимся).

Шаг 3. Заливаем новый слой черным цветом. Для этого переходим на этот слой и идем Edit>Fill (Редактировать>Залить). В появившемся окне выставялем значения, как на рисунке внизу (цвет заливки делаем черным). После чего переименовываем его в «Background color».

Шаг 4. Переходим на слой «Puzzle». И идем Filter>Texture>Texturizer, а в появившемся окне выбираем пункт Load Texture (Загрузить текстуру), кликнув по стрелочке. Далее идем в папку с соответствующей текстурой (обычно в Windows она находится по такому пути: для начала C:\Program files\Adobe\Photoshop CS3 (для этой версии фотошопа), далее находим папку Presets, а в ней Textures, где уже и кликаем по файлу Puzzle. psd). Параметры для фильтра установите, как на рисунке внизу.

Шаг 5. Выбираем инструмент Pen Tool (Перо (P)) в режиме «Paths»(Контуры) и обводим подходящий пазл. После этого нажимаем Ctrl+Enter, чтобы перевести контур в выделение.

Шаг 6. Теперь идем Layer>New>Layer via Cut (Слой>Новый>Посредством вырезания). В результате чего получаем новый слой, который для удобства переимновываем в «First puzzle piece».

Шаг 7. Находясь на слое с пазлом, нажимаем Ctrl+T, чтобы вызвать инструмент Free Transform (Свободная Трансформация) и перемещаем этот пазл, как нам того захочется, по окончании нажимаем Enter.

Шаг 8. Для красоты добавляем тень. Идем в соответствующий Стиль Слоя (см. рисунок) и задаем параметры примерно, как на рисунке внизу.

Шаг 9. Добавляем еще сдвинутых или удаленных пазлов схожим образом.

Шаг 10. Пришло время обрезать лишнее. Выделяем Пером по периметру подходящую форму и, нажав Ctrl+Enter, получаем выделение. Инвертируем его (Select>Inverse) и удаляем лишнее (Delete). После этого снимаем выделение (Ctrl+D).

Шаг 11. После этого снимаем выделение (Ctrl+D). Переходим на слой «Background color» и заливаем его белым (или не заливаем, как хотите): Edit>Fill.

Шаг 12. Осталось только добавить общую тень, но это уже по желанию. Делаем точно также, как и для отдельного пазла. Наш пазл готов!

Создаем приятный простой шаблон сайта с помощью Фотошопа. Всего 12 шагов и ваш сайт готов.

Шаг 1. Первый делом, создаем новый документ (Ctl+N), размером 1000*600 пикселей.

Шаг 2. Создаем новый слой (Ctrl+Shift+N) и идем в Layer Styles (Стили Слоя) двойным щелчком по иконке слоя на Палитре Слоев. А там в пункте Gradient Overlay (Наложение Градиента) задаем следующие параметры (тем самым мы закрасили весь слой приятным зеленым градиентом)

Шаг 3. Добавим текстуру. Для этого скачаем ее отсюда, вставим в новый слой и поменяем Режим Смешивания (Blending Mode) на Linear Burn (Линейный Затемнитель).

Шаг 4. Теперь, выбираем Инструмент Rectanqular Marquee Tool (Прямоугольная Область(M)) и выделяем им область, как на рисунке внизу. Создаем новый слой (Ctrl+Shift+N) и, перейдя на него, заливаем прямоугольник зеленым (#75a414) цветом.

Шаг 5. Повторяем предыдущий шаг для создания новой области. Заливаем его #639013.

Шаг 6. Выбираем Инструмент Rounded Rectangle Tool (Прямоугольник со скругленными углами (U)) с радиусом скругления около 5 пикселей и рисуем белую область

Шаг 7. Тем же Инструментом Rounded Rectangle Tool (U) рисуем навигационную область и после этого, выбрав Инструмент Type Tool (Текст (T)), пишем слово «home» (или любое другое), используя #639013 цвет.

Шаг 8. Если надо, рисуем ещё навигационные кнопки тем же способом.

Шаг 9. Покажем, что созданная в предыдущем шаге кнопка неактивна в данный момент. Для этого закрасим её в отличный от белого цвет. Идем в Стили Слоя (Layer Styles) слоя с кнопкой (кликнув дважды по иконке слоя) и задаем следующие параметры:

Шаг 10. Добавлем белый текст неактивным кнопкам.

Шаг 11. После того, как мы подпишем все кнопки, наш шаблон сайта будет выглядеть так

Шаг 12. Осталось только добавить текст и картинки. Наш макет сайта готов.

В данном уроке создадим свадебный макет сайта. Макет получится простеньким, зато быстро ;).

Шаг 1. Создаем новый документ (Ctrl+N) размером 760*770 пикселей. Помещаем в этот файл картинку со стока и перемещаем её в нужное место с помощью Инструмента Move (Перемещение (V)).

Шаг 2. Далее, давайте добавим красивые свадебные фотографии и разместим их на слайдах. Чтобы переместить используем Инструмент Move, а для изменения Масштаба и Поворота Инструмент Free Transform (Свободная Трансформация (Ctrl+T)).

Шаг 3. Выбираем Инструмент Rectangle Tool (Прямоугольник (U)) и рисуем им прямоугольник #dfdac7 цвета. После этого применим к слою с прямоугольником Стиль Слоя (Layer Styles) — Outer Glow (Внешнее Свечение), выбрав соответствующую кнопочку внизу Палитры Слоев.

Шаг 4. Для следующего шага нам понадобятся гранжевые кисти, их можно скачать с сайта Mud brush*|*brush-mania. com. Загружаем их в Фотошоп, создаем новый слой (Ctrl+Shift+Alt+N) и рисуем Инструментом Brush Tool (Кисть) (выбрав новые кисти) некую текстуру (см. рисунок). Режим Смешивания (Blending Mode) для данного слоя ставим Overlay (Перекрытие). Шаг 5. Копируем прямоугольник и помещаем так, как показано на рисунке. Текстуру можно изменить, можно оставить. Шаг 6. Рисуем ещё один прямоугольник #3a3a3a цвета. После этого украшаем его цветком и молодоженами. Шаг 7. Выбираем Инструмент Horizontal Type Tool (Горизонтальный Текст (T)) и добавляем текст на наш макет. Шаг 8. Осталось совсем немного. Выбираем Инструмент Custom Shape Tool (Произвольная фигура (U)) и добавляем какие-нибудь красивые декоративные элементы (мы выбрали цветочки). Шаг 9. Добавим ещё пару фоток и всё! Наш свадебный макет сайта готов!/td>