Вебграфика »

Создание сайта в фотошопе за 10 минут!

  • Besty
  • 27 июнь 2010
  • 11:33:35
  • 17182
Привет, фотошоперы Photoshoplove.ru! На сегодня я приготовил другой урок фотошопа, он даже другого типа. Если до этого я делал только уроки фотошопа для сайтов, то сегодня создал урок, который можно использовать в своём блоге. Мы сделаем сайт в фотошопе за 10 минут! Этот шаблон psd был создан для использования на WordPress, но, думаю, что он также подойдёт для другой CMS платформы, такой как Drupal , Joomla, Blogger или любой платформы для блогов.
Это мой окончательный результат урока:
Создание сайта в фотошопе за 10 минут!

Загрузить файл-источник
Файл-источник для этого урока фотошопа можно загрузить с TrendyPacks.com за 5$/каждый

Хотите больше?

С Infinity Design Pack Вы получите доступ ко всем файлам-источникам наших уроков фотошоп + все пакеты векторов и кистей от TrendyPacks.com (всего там 3000 графических элементов и 6 месяцев бесплатных обновлений!)
Если Вы будете следовать моим инструкциям шаг за шагом, Вы сможете создать такое же расположение в psd за 10 минут. Я должен сказать, что я потратил больше заявленного времени, так как сначала сделал набросок на бумаге с помощью карандаша, затем попытался найти наилучшие цветовые комбинации и потом всё соединил, но, если бы я пропустил все эти шаги, то реальное время составило бы 10 минут. Поэтому перед началом этого урока фотошопа запустите секундомер!
Итак, начнём (урок и наш отсчёт времени)!

Открываем Фотошоп и создаем новый документ (Ctrl + N)
В левой части я добавлю наш логотип (TrendyTuts), а в правой с помощью инструмента Rectangle tool я буду создавать эту фигуру (527px на 43px). Я использовал цвет #f58c3e.
Создание сайта в фотошопе за 10 минут!

Я поделю фигуру на две части и поверх этого всего создам ещё одну голубую фигуру (#46afe0), используя инструмент Rectangle tool. Используя векторные фигуры из свободного набора фигур я добавлю ленту RSS и иконку Твиттера.
Вот, что у меня вышло в результате:
Создание сайта в фотошопе за 10 минут!

Затем создаем фигуру с помощью инструмента Rounded Rectangle Tool – выбираем радиус 10рх.
Создание сайта в фотошопе за 10 минут!

Я создам фигуру с размерами 937рх на 1127рх и буду использовать в качестве цвета #a7aa9d
Создание сайта в фотошопе за 10 минут!

Затем я применяю эти настройки стиля слоя Layer Styles:
Создание сайта в фотошопе за 10 минут!

Создание сайта в фотошопе за 10 минут!

Затем поверх этой фигуры я создам другую, используя инструмент Rounded Rectangle Tool с радиусом 10рх. Размеры: 922рх на 1108рх и цвет #cbd0bc.
Создание сайта в фотошопе за 10 минут!

В ходе следующего шага нам необходимо убедиться, что выбран инструмент Rounded Rectangle Tool, и создать эти фигуры.
Создание сайта в фотошопе за 10 минут!

Затем я создам панель навигации.
Я выбираю инструмент Rounded Rectangle Tool и создаю эту фигуру
Создание сайта в фотошопе за 10 минут!

Затем, используя инструмент Type tool, я рисую такой элемент (сначала в верхнем левом углу фигуры)
Создание сайта в фотошопе за 10 минут!

Я нажимаю на клавиатуре Ctrl+Alt+Shift+N (чтобы создать новый слой), затем я нажимаю правой кнопкой на фигуре и выбираю пункт меню Make selection.
Создание сайта в фотошопе за 10 минут!

Я выбираю инструмент Paint Bucket Tool и заливаю моё выделение красным цветом.
Создание сайта в фотошопе за 10 минут!

Я сделаю то же самое с правой частью.
Создание сайта в фотошопе за 10 минут!

Теперь в моём наборе слоев Layer palette я выбираю навигационную панель и фигуры, нарисованные с помощью Pen tool (зажимаете Ctrl и с помощью мышки выбираем эти фигуры).
Когда они будут выделены, нажимаем правой кнопкой и выбираем пункт меню Convert To Smart Object (чтобы сгруппировать их)
Создание сайта в фотошопе за 10 минут!

Затем применяем эти настройки стиля слоя Layer styles:
Создание сайта в фотошопе за 10 минут!

Создание сайта в фотошопе за 10 минут!

Создание сайта в фотошопе за 10 минут!

Создание сайта в фотошопе за 10 минут!

Мой результат:
Создание сайта в фотошопе за 10 минут!

Затем с помощью инструмента Type tool я добавлю ссылки для навигации:
Создание сайта в фотошопе за 10 минут!

Затем я выбираю инструмент Line Tool и создаю эту фигуру, используемую для навигации.
Создание сайта в фотошопе за 10 минут!

Создание сайта в фотошопе за 10 минут!

С помощью инструмента Rectangle tool я добавляю эту фигуру (она используется для поиска) и применяю эти настройки стиля слоя Layer styles:
Создание сайта в фотошопе за 10 минут!

Я также использую картинку увеличительного стекла для нашей секции Freebies Section
Мой результат:
Создание сайта в фотошопе за 10 минут!

Навигация почти закончена, но я хотел бы научить Вас уловке, которая сделает нашу навигационную панель лучше.
Выбираем инструмент Ellipse Tool и создаем фигуру вне навигационной панели (чтобы сделать это, Вы должны будете удостовериться, что слой с кругом находится под навигационной панелью в наборе слоев Layer palette).
Я создам первую фигуру слева – это чёрная фигура.
Создание сайта в фотошопе за 10 минут!

Затем я применяю эти настройки стиля слоя Layer styles:
Создание сайта в фотошопе за 10 минут!

Создание сайта в фотошопе за 10 минут!

А это мой результат:
Создание сайта в фотошопе за 10 минут!

Я обработаю таким же образом правую часть.
Вот мой окончательный результат для навигационной панели:
Создание сайта в фотошопе за 10 минут!

Затем я буду создавать область для содержимого, которая делается очень просто. Сначала берем инструмент Rectangle Tool и создаем эту фигуру, используя цвет #488eae
Создание сайта в фотошопе за 10 минут!

Затем с помощью инструмента Rectangle tool создаем небольшую область слева, используем цвет #5eb3d9
Создание сайта в фотошопе за 10 минут!

Теперь с помощью инструмента Pen Tool я делаю ту же вещь, которую сделал для навигационной панели (я создам скругленные углы)
Создание сайта в фотошопе за 10 минут!

Затем используем инструмент Ellipse Tool и создаем фигуру вне области голубой фигуры (чтобы сделать это, мы должны удостовериться, что наш слой с кругом находится под слоем с голубой фигурой в наборе слоев Layer palette). Используем цвет # 3a6a80
Создание сайта в фотошопе за 10 минут!

И, используя инструмент Type tool, добавляем изображения и текст.
Создание сайта в фотошопе за 10 минут!

Затем я создаю таким же образом боковую часть, но вместо текста я вставляю баннеры на «Рекламную площадь» и несколько изображений для Flickr Group.
Это мой окончательный результат урока создания сайта за 10 минут. Как вам? :
Создание сайта в фотошопе за 10 минут!

Теперь можете выключить свой секундомер и посмотреть, что создание этого макета в фотошопе заняло у Вас не больше 10 минут.

Переведено для http://photoshoplove.ru/
Оригинал урока фотошопа http://trendytuts.coml
Bookmark and Share
  • Obliblechiefe
  • 4 июля 2010 20:18
  • Комментариев: 0
  • Новостей: 0
Супер! Хороший урок! Буду делать сайт.
  • optorarvelart
  • 6 июля 2010 17:04
  • Комментариев: 0
  • Новостей: 0
Отличный урок! Спасибо!
  • Quahjefeque
  • 9 июля 2010 09:19
  • Комментариев: 0
  • Новостей: 0
Шикарно! Спасибо! У вас хорошие уроки фотошопа!
  • vlad
  • 20 марта 2011 08:45
  • Комментариев: 0
  • Новостей: 0
Хороший урок, но его за 10 минут начинающий фотошопер на врят ли сделает :-))
Но мне нравиться, и благодарю за перевод!
  • Liska
  • 18 января 2012 08:11
  • Комментариев: 0
  • Новостей: 0
Все прикольно написано
  • Иван
  • 7 февраля 2013 15:28
  • Комментариев: 0
  • Новостей: 0
Урок хороший.
Подскажите а как данный шаблон прикрутить к Joomla 2.5 и как сохранить его как шаблон сайта? а то с фотошопом я недавно стал пользоваться. так и не понял как сохранить данный макет как шаблон..
  • photoshoplove
  • 9 февраля 2013 18:14
  • Комментариев: 42
  • Новостей: 0
Иван,
Спасибо за оценку. Этот шаблон прикрутить можно только профессионалу в этому деле. Лучше найти в интернете сайты где есть бесплатные шаблоны для Джумлы.
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.
Уроки фотошопа
Свежие уроки
{lastnews}
Видео уроки
Популярные уроки
Наш опрос
Какие уроки вам больше нравятся?