—»     —»   Уроки Photoshop: Разработка профессионального сайта-портфолио при помощи Photoshop и сеточной системы 960 – Часть 1
  Раздел: Образование и Изучение   Нет комментариев  

Уроки Photoshop: Разработка профессионального сайта-портфолио при помощи Photoshop и сеточной системы 960 – Часть 1



В нашем сегодняшнем руководстве мы хотим рассказать вам о процессе работы над профессиональным сайтом-портфолио с использованием Photoshop и сеточной системы 960. Посредством некоторых текстур и стилей слоев вы увидите, каким образом мельчайшие детали могут сыграть большую роль в качестве вашего дизайна.

Ознакомьтесь с тем, над чем мы сегодня будем работать:

Уроки Photoshop: Разработка профессионального сайта-портфолио при помощи Photoshop и сеточной системы 960 – Часть 1

Необходимые ресурсы

* Сеточная система 960
* Текстура бумаги
* BuddyIcons
* Иконка Twitter, разработанная mfayaz

Введение в сеточную систему 960

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

Распакуйте архив, который вы только что скачали, перейдите в папку «templates», а затем пройдите в папку «photoshop». Там вы увидите 3 PSD-файла. Каждый из файлов содержит в себе сетку с 12, 16 или 24 колонками.

В данных PSD-файлах уже выставлены некоторые направляющие, они могут быть очень полезны. Для того чтобы активировать линейки, пройдите в меню View > Show > Guides, либо воспользуйтесь сочетанием клавиш Ctrl/Cmd + ;.

В ходе данного руководства нам нужно будет создавать фигуры с определенными размерами. Для того чтобы узнать точный размер фигуры или выделения в момент создания, откройте панель информации, пройдя в меню Window > Info. Ширина и высота фигур и выделений отображается на данной панели.

Уроки Photoshop: Разработка профессионального сайта-портфолио при помощи Photoshop и сеточной системы 960 – Часть 1

Этап 1: Настройка документа

Откройте файл под названием 960_grid_12_col.psd в Photoshop. Затем пройдите в меню Edit > Canvas Size и установите ширину на 1200px, а высоту примерно на 1600px. Вы можете выставить высоту позже таким образом, чтобы она соответствовала размеру вашего шаблона.

Уроки Photoshop: Разработка профессионального сайта-портфолио при помощи Photoshop и сеточной системы 960 – Часть 1

Этап 2: Создаем фон

Для того чтобы создать ощущение глубины, давайте добавим незначительный фон. Вместо того чтобы копировать и вставлять полноразмерную текстуру в основной документ, мы сократим размер файла за счет создания текстуры, которую можно будет подстроить под размеры документа как по ширине, так и по высоте. Давайте начнем с создания документа с разрешением 500х500 пикселей в Photoshop. Убедитесь, что вы выставили разрешение по соотношению пикселей на дюйм на 72, так как это идеальное разрешение для изображений, предназначенных для использования в интернете.

Уроки Photoshop: Разработка профессионального сайта-портфолио при помощи Photoshop и сеточной системы 960 – Часть 1

Залейте фон светло-синим цветом (#d5e2e7)

Уроки Photoshop: Разработка профессионального сайта-портфолио при помощи Photoshop и сеточной системы 960 – Часть 1

Для нашего сегодняшнего руководства мы подобрали данную текстуру бумаги с сайта stock.xchng. Вставьте текстуру в документ bg_texture, а затем пройдите по следующим этапам:

* Уменьшите текстуру и примените фильтр резкости, чтобы выявить детали
* Обесцветьте текстуру (shift+ctrl+U)
* Переключите режим смешивания слоя на multiply и понизьте уровень плотности отображения до приблизительно 20%. В результате у нас должно получиться нечто вроде этого:

Уроки Photoshop: Разработка профессионального сайта-портфолио при помощи Photoshop и сеточной системы 960 – Часть 1

Результат почти незаметен, но это будет достаточно для того, чтобы сделать наш основной документ глубже. Теперь пройдите в меню Edit>Define Pattern, и не забудьте задать название данной текстуре.

Уроки Photoshop: Разработка профессионального сайта-портфолио при помощи Photoshop и сеточной системы 960 – Часть 1

В нашем основном документе мы эту текстуру теперь применим. Выберите фоновый слой и пройдите в меню Edit>Fill, выбрав затем только что созданную текстуру.

Уроки Photoshop: Разработка профессионального сайта-портфолио при помощи Photoshop и сеточной системы 960 – Часть 1

Этап 3: Разработка шапки

Создайте новую группу и назовите ее «header». Выберите инструмент для создания прямоугольника (Rectangle Tool – U), и создайте прямоугольник с размерами 2000х150 пикселей и цветом #404448. Назовите его «header bg». Кликните правой кнопкой мыши по этому слою и выберите пункт Convert to Smart Object (преобразовать в smart object). Затем пройдите в меню Filter > Noise > Add Noise и примените указанные на изображении параметры.

Уроки Photoshop: Разработка профессионального сайта-портфолио при помощи Photoshop и сеточной системы 960 – Часть 1

Добавьте название вашей дизайн-студии посредством инструмента создания текста (Type Tool – Т) с левой стороны шапки. Мы использовали шрифт Steinem Bold Italic размером в 90pt. Активируйте направляющие (Ctrl/Cmd + ;), они помогут вам расположить все точно так, как отображено на изображении ниже.

Уроки Photoshop: Разработка профессионального сайта-портфолио при помощи Photoshop и сеточной системы 960 – Часть 1

Как только закончите с расположением логотипа, можно будет добавить меню в верхний правый угол. Мы использовали шрифт Myriad Pro размером в 15pt. Мы также задали каждой ссылке небольшую тень для того, чтобы они выделялись на фоне.

Уроки Photoshop: Разработка профессионального сайта-портфолио при помощи Photoshop и сеточной системы 960 – Часть 1

Мы создали прямоугольник для того, чтобы отдельно выделить секцию Home. Для того чтобы выделить выбранную страницу, мы применим стиль кнопки к данному выделению. Примените стиль, приведенный ниже, посредством двойного клика по фигуре кнопки на панели слоев для того, чтобы открыть диалоговое окно редактирования стилей слоя. Примените данные стили к внутренней тени (Inner Shadow), а также 1 пиксель к контуру (Stroke) цветом #42454a по внешней стороне прямоугольника.

Уроки Photoshop: Разработка профессионального сайта-портфолио при помощи Photoshop и сеточной системы 960 – Часть 1

Для того чтобы придать немного глубины, мы добавили границу толщиной в 1 пиксель и цветом #ffffff под шапкой (при помощи инструмента Line).

Уроки Photoshop: Разработка профессионального сайта-портфолио при помощи Photoshop и сеточной системы 960 – Часть 1

Этап 4: Создание подзаголовка

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

Мы использовали как шрифт Chunk Five (для верхнего текста), так и шрифт Gibson (для нижнего). Видимая сетка поможет вам расположить все элементы корректно.

Уроки Photoshop: Разработка профессионального сайта-портфолио при помощи Photoshop и сеточной системы 960 – Часть 1

Этап 5: Добавляем разделитель

Для того чтобы отделить подзаголовок от секции с работами, мы создадим разделительную полосу. Создайте новую группу и назовите ее «separators». Выберите инструмент для создания линий (Line Tool – U), и создайте вертикальную линию от самого верха закругленного прямоугольника, до самого низа. Установите белый цвет (#FFFFFF), и назовите этот слой «1px line».

Продублируйте этот слой (правая кнопка мыши + пункт Duplicate). Измените цвет новой линии на #abb0b3. Выберите инструмент перемещения (Move Tool – V), и передвиньте слой на один пиксель вниз.

В группу separators добавьте маску (Layer > Layer Mask > Reveal All). Затем выберите инструмент заливки градацией (Gradient Tool – G), зажмите клавишу Shift и «протяните» черно-прозрачную градацию от левой стороны вашего разделителя для того, чтобы создать эффект исчезновения. Повторите то же самое и с правой стороной. В завершении у вас должно получиться нечто подобное:

Уроки Photoshop: Разработка профессионального сайта-портфолио при помощи Photoshop и сеточной системы 960 – Часть 1

Поздравляем! Мы уже на полпути!

Следите за новостями, и не пропустите вторую часть руководства!
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: Photoshop, дизайн сайтов
Опубликовал Design FactoRy   Прочитано (раз): 9349   |   Нет комментариев
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Национальная денежная единица России
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Ноябрь 2017    »
ПнВтСрЧтПтСбВс
 12345
6789101112
13141516171819
20212223242526
27282930