В этом замечательном уроке мы будем учиться рисовать дизайн сайта на примере игрового портала. Урок достаточно длинный, но в тоже время легкий и понятный. По данной технологии можно создавать не только игровые сайты. Дизайнеры, берите на заметку! =)
Сегодня я вам покажу, как вы можее сделать продвинутый игровой дизайн сайта. Это мой финальный результат:
{mosgoogle}
Создайте новый документ
Размер 760×770 пикселей
Фон: не играет ролиСоздайте еще один документ размером 4×4
(мы будем делать шаблон)
Увеличиваем на 1600%, выбираем инструмент pencil tool (размер
1 пиксель) и начинаем рисовать несколькими цветами,
я использовал эти
Затем идем Edit > define pattern
Выбираем имя шаблона
и нажимаем OKСоздадим новый слой ( CTRL+SHIFT+N)
Выбираем инструмент Paint Bucket Tool.
И используем тот шаблон, который
мы сделали
Заролняем наш будущий дизайн странички этим видом заливки
Затем идем Filter > render > Lightning Effects,
и устанавливаем следующие настройки
Затем выбираем Rounded rectangle tool, устанавливаем радиус на
5 пикселей, и создаем форму
на нашем рисунке
Идем Edit > Transform > Warp Tool
(у вас есть Warp tool, только если
у вас CS2 или выше)
Для warp tool используем такие настройки
Вот мой результат
Копируем этот слой (CTRL+J)
и создаем такую же форму,
но чуть меньше
и распологаем под первым.
Затем выбираем инструмент rounded rectangle Tool, создаем простую форму белого цвета,
я использовал другой для наглядности.
Затем выбирайте
оба слоя
Объединяем их, путем нажатия CTRL+E
Затем загрузите выделение для большой формы (для этого идем сюда Select > Load selection)
Будьте уверены инструмент Rectangular Marquee Tool уже выбран, затем переместите выделение
так же, как и
на картинке 
Сейчас
вы должны применить
rasterize к главной форме
будьте уверены главная форма уже выбрана, затем нажмите CTRL+SHIFT+I (это обратит ваше выделение)
нажмите Delete
на вашей клавиатуре
Затем CTRL+D
Вот мой результат
Снова загрузите выделение для
большой формы.
Выбирайте rectangular Marquee Tool (используя следующие настройки:)
Затем
с помощью rectangular marquee tool создаем вот такое выделение:
Вы получите
что-то вроде этого после того, как отпустите
кнопку мыши.
Создайте новый слой ( CTRL+SHIFT+N)
Выбираем paint bucket tool,
и нажимаем один раз внутри выделения (используйте тот цвет, который хотите)
Затем нажмите CTRL+D,
и идите в настройки стиля слоя
Вот мой результат
Затем для главной формы используйте
те же настройки стиля
Для белой формы примините
следующий стиль
Вот мой результат
Выбираем белый слой
и маленький оранжевый слой
в нашем меню слоеви перетащите их
на кнопку" create a new layer "
Это скопирует оба слоя,
но при этом
2 останутся выделенными. Обедините
их нажатием CTRL+E
Выделим этот слой
и идем Edit > Transform > Flip Vertical
И
с помощью мыши размещаем
так же как
и я
Затем выбираем Rounded rectangle Tool
и создаем форму, как
у меня
Применяем Rasterize для этой формы, затем создаем форму другого цвета
и разещаем, как я.
Загружаем выделение для этой формы (для загрузки выделения нажмите CTRL + левой кнопокй мыши по слою
с нашей формой)
Вы увидите выделение
вокруг формы
Выбираем слой
с оранжевой формой
Нажимаем CTRL+SHIFT+I (обращение выделения), и
с помощью eraser tool удаляем некоторые части нашей формы (следуте
за зеленым цветом)
Я использовал зеленый, чтобы
вы увидели где надо удалить
Снова нажимаем CTRL+SHIFT+I,
у вас уже выбран инструмент Rectangular marquee Tool, перемещаем выделение, как
у меня.
Затем стираем всё внутри выделения
с помощью Eraser tool
Нажимем CTRL+D, Затем создаем выделение, как
у меня, с помощью Rectangular
Marquee Tool
Будьте уверены, выбран оранжевый слой. Снова стираем Eraser tool. Нажимаем CTRL+D
Создаем другое выделение
Чистим
с помощью eraser toll,
так же, как
у меня
Примините следующие стили
для слояВот мой результат
Выбираем Rounded Rectangle tool еще один раз,
и создаем еще
2 две формы (цвет
не важен)
Применяем Rasterize
к этим слоямТогда с помощью Esraser tool удаляете главную часть этих 2 зеленых форм (когда Вы будете удалять держите клавишу SHIFT — Таким образом Вы удалите очень хорошо)Вот мой результат
Примените следующие
настройки стиля
Теперь продублируем заголовки для наших блоков
с контентом и разместим как
у меня
Теперь, используя Rounded rectangle Tool, создадим несколько простых форм
и разместим их примерно так:
Затем добавим
какие-нибудь пиксельные иконки, или
что-то похожее, ну
и конечно же не забудем добавить некоторый текст рядом
с иконками.
Вставляем очищенную картинку
и простой логотип.
Вы можете скачать много логотипов
на сайте www.free-photoshop.comВот,
в принципе, и все =)
А
так же вы можете добавить формы для логина
в правой части сверху.
Я использовал Rounded rectangle tool для добавления
этих форм.Вот мой финальный результат.
Я надеюсь вам понравиться
