Записи сайта за месяц августа, 2009.

:

Создадим макет для бизнес сайта за 10 минут с помощью Фотошопа.

макет сайта

создание сайта

Шаг 1. Создаем новый файл в Фотошопе, размером 960px на 900px и белым фоном. В верхней части макета рисуем прямоугольник (размер: 961px на 95px, цвет#303123).

color overlay
outer glow
навигация на сайте

Шаг 2. После этого добавляем логотип и навигацию. У нас для логотипа использовался шрифт Bauhaus93, но он не является свободнораспространяемым. Вы же можете использовать свои шрифты или воспользоваться одним из бесплатных шрифтов, например, с этого сайта dafont. com. Для навигации будем использовать серый цвет для текста и прямоугольник со скругленными краями для выделения пунктов меню. Для этого прямоугольника используем следующие Стили Слоя (Color Overlay, Outer Glow)

inner glow
gradient overlay
фиксированный размер
шапка сайта

Шаг 3. Переходим к шапке сайта. Для этого опять рисуем прямоугольник (под серым прямоугольником) размером 960 на 234 пикселей со следующими Стиля Слоев: Inner Glow и Gradient Overlay (см. рисунок, для градиента используем цвета — #fc6200 и #ff9e40). Обратите внимание, что для при рисовании прямоугольной фигуры можно просто задать фиксированный размер фигуры (см. рисунок).

шапка сайта

Шаг 4. Добавим тест и картинки на шапку. Также можно украсить её с помощью Кистей с этого сайта BrushMix. com.

gradient overlay

detailed gradient overlay

Шаг 5. Добавляем основное наполнение сайта. Для этого опять рисуем прямоугольную область размером 960px и 530px и применяем к ней следующие Стили Слоя

макет сайта бизнес тематики

Шаг 6. Осталось только создать подвал. Рисуем прямоугольник (цвет — #303123, размер — 960px на 46px) и заполняем его необходимой информацией. Ну вот и всё! Наш бизнес-макет готов. Правда легко и быстро :).

:

снеговик в фотошоп

Шаг 1. Создаем новый документ (Ctrl+N) размером 750*750 пикселей. Выбираем Инструмент Gradient Tool (Градиент (G)) и закрашиваем линейным градиентом документ, цвета для градиента задаем такие: #FFFFFF (белый), #759CC3, #02143A.

gradient

Шаг 2. Создаем новый слой (Ctrl+Shift+N) и называем его Snow Body. Опять выбираем Инструмент Градиент и задаем для него: тип — Радиальный, цвета — #FFFFFF, #B8B7BD и #FFFFFF. Теперь, рисуем круговое выделение (с помощью Инструмента Овальная область (Ellipse Marquee (M))) и заливаем его градиентом, чтобы получилось, как на рисунке внизу. Снимаем выделение (Ctrl+D) и, находясь на слое с шаром, идем Filter>Noise>Add Noise (Фильтр>Шум>Добавить шум). Параметры для фильтра: Amount (количество) — 2, Distribution (распределение) — по Гауссу, ставим галку у «Monochromatic (Монохромный)».

радиальный градиент add noise

Шаг 3. Создаем новый слой, называем его Snow Head и повторяем для него предыдущие шаги с шаром, только круг делаем чуть меньше (см. рисунок).

рисуем голову

Шаг 4. После этого, создаем ещё один новый слой, называем его Scarf и, используя Инструмент Pen tool (Перо (P)), рисуем замкнутую кривую где-то в области шеи у снеговика. Эта кривая будет изображать шарф. Выбираем Палитру Paths (Контуры) и нажимаем на кнопочку Load path as Selection (Загрузить контур, как выделенную область) внизу Палитры. После этого идем обратно на Палитру Слоев (Layers) и, находясь на слое с шарфом, заливаем (Shift+F5) его красным (#9F0004).

рисуем шарф path

Шаг 5. Добавим складки. Для этого, создаем новый слой и называем его Scarf Folds. Выбираем Инструмент Lasso (Лассо (L)) и создаем выделение, как на рисунке внизу. После этого, выбрав мягкую Кисть (Brush (B)), диаметра 50 px и цвета #4F0101, рисуем складку в нижней части выделения. Для остальных складок повторяем процеуру.

lasso brush

Шаг 6. Создаем новый слой и называем его Snow Cap. Повторяем действия, которые мы производили рисуя голову, только для Градиента используем следующие цвета: #870203, #210102 и #870203. После этого, рисуем выделение, как на рисунке внизу, чтобы выделить лишнее у шапки и нажимаем Del.

рисуем шарку

Шаг 7. Создаем новый слой и называем его Eyes. Рисуем два кружка и заливаем их черным. После этого идем в Стили Слоя (Layer Styles), а там в Drop Shadow (Тень) и задаем: Opacity (непрозрачность)30%, Distance (смещение)3, Size (размер)0, остальные параметры пусть будут, как были «по-умолчанию».

рисуем глаза

Шаг 8. Рисуем нос. Создаем опять новый слой, называем его Noise и рисуем с помощью Pen Tool замкнутую кривую, которая будет у нас носом у снеговика. Переводим контур в выделение и заливаем его линейным Градиентом (цвета: #FFB036 и #FE2E00). После этого, если захотите, можете немного затупить его, добавив оранжевый кружок и стерев Ластиком (Eraser Tool) лишнее. Осталось только добавить Тень от носа, для этого: создаем новый слой (Nose Shadow), выделем область под тень с помощью Polygonal Lasso Tool и заливаем её черным цветом. Непрозрачность (Opacity) данного слоя ставим на 20%.

nose рисуем нос тень

Шаг 9. Теперь, давайте нарисуем прикольные меховые шарики. Для этого, для начала, подготовим Кисть (Brush). Выбираем Кисть Dune Grass (Осока) из набора кистей «по-умолчанию» и в Палитре Brushes (Кисти (F5)) задаем следующие параметры:

brushes кисти палитра кисти палтра brushes

Шаг 10. Создаем новый слой (Furball), задаем Foreground (основной) цвет — #9b0004, размер Кисти ставим на 20 пикселей и рисуем шарик, как на картинке внизу. Потом, на отдельный слой, копируем наш шарик (Ctrl+J) и перемещаем этот новый слой под слой с головой на Палитре Слоев. При необходимости, меняем размер шарика (Ctrl+T). Аналогичным образом добавляем шарики на шапочку и шарфик.

рисуем меховой шарик path

Шаг 11. Снеговичок готов. Добавим снежной атмосферы. Создаем новый слой (Snow Dust) и, Кистью Dry Brush (белого цвета, размером около 30 пикселей), рисуем снег на шапочке и меховых шариках снеговика. После этого, создаем ещё один новый слой (Snow Floor) и, выбрав белую Кисть, рисуем снег на земле около снеговика. Поменяв цвет Кисти на #CCCCCC (серый), добавляем немного теней.

рисуем снег рисуем тень

Шаг 12. Ну вот и всё! Можно ещё добавить снежики, но это уже по желанию.

рисуем снеговика в фотошопе

:

Давайте создадим металлическую текстуру в Фотошопе. Это очень простой и быстрый урок.

металлическая текстура

Шаг 1. Создаем новый файл (Ctrl+N) размером 64х64 пикселей. Выбираем Инструмент Прямоугольник со скруглёнными углами (Rounded Rectangle Tool) (в режиме фигуры) и выставляем радиус закругления 100 пикселей.
рисуем прямоугольную фигуру

Шаг 2. Добавляем якорные точки с помощью Инструмента Добавить Опорную точку (Add Anchor Point Tool)
якорные точки anchor point

Шаг 3. Теперь идём в основное меню Редактирование>Свободная трансформация (Edit>Free Transform (Ctrl+T)) и поворачиваем нашу поверхность:
free transform

Шаг 4. Кликаем правой кнопкой мыши на миниатюре слоя с поверхностью, выбираем Параметры Наложения (Blending Option) и затем — Тень (Drop Shadow).
blending option, drop shadow

Шаг 5. Дальше идём в подменю Внутренняя Тень (Inner Shadow) и выставляем параметры:
inner shadow

Шаг 6. Идём в Наложение Градиента (Gradient Overlay).
gradient overlay

Шаг 7. У вас должно получиться что-то вроде этого:

Шаг 8. Дублируем наш слой (Ctrl+J). Идём в Редактирование>Трансформирование>Отразить по горизонтали (Edit>Transform>Horizontal) и после этого ещё передвинем нашу поверхность. Далее кликаем правой кнопкой мыши по новому слою с поверхностью на Панели Слоев и выбираем Внутренюю Тень (Inner Shadow). Меняем Угол на 141. Теперь выбираем подменю Наложение градиента (Gradient Overlay) и здесь тоже меняем Угол на -135. Нажимаем О`кей.
gradient overlay, drop shadow

Шаг 9. Идём в основное меню и выбираем Редактирование>Определить Узор (Edit>Define Pattern), даем ему имя и нажимаем Окей. Создаём новый документ произвольного размера и заливаем его нашим узором.
define pattern

Шаг 10. Напоследок, выбираем Фильтр>Рендеринг>Эффекты освещения (Filter>Render>Lighting Effects) и используем параметры, как на рисунке внизу. Затем, идём в Редактирование>Ослабить (Edit>Fade: Lighting Effects) и ставим 50%.
light effects

Шаг 11. Всё, наш фон готов.