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

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

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

Первую часть руководства вы найдете здесь.

А сегодня мы собираемся завершить то, что начали.

Вот превью того, что мы собираемся создать:

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

Давайте начнем оттуда, где остановились

Этап 6: Добавляем последние работы

Пришло время показать всем ваши последние творения. Создайте контейнеры, в которых будут размещены изображения ваших работ. Для того чтобы посетителям было легче ориентироваться, вы можете оставить сетку.

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

Каждому блоку задайте внешнее свечение:

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

А закончить необходимо следующим образом:

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

Чтобы добавить контрастности, вы можете задать тень каждому изображению. Создайте темный прямоугольник идентичный по размеру с изображением в качестве нового слоя под изображением, примените фильтр размытия гаусса (Gaussian Blur) с радиусом в 5 пикселей, а затем примените искажение (Transform > Distort) для того чтобы тень в середине было немного искривлена. В итоге у вас должен получиться следующий результат:

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

Под примерами портфолио мы также добавили заголовок «Latest Work» (последние работы) с использованием шрифта ChunkFive размером в 30pt. Для контрастности добавляем незначительную (20%) тень.

Этап 7: Создаем побуждающие к действию кнопки

Мы начали с дублирования группы separator и перемещения копии под раздел портфолио для создания разделения. Следующий этап заключается в разработке элементов, побуждающих к действию. Мы создали два таких элемента, чтобы позволить посетителю либо посмотреть еще работы, либо связаться с владельцем сайта.

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

Мы использовали следующие стили для оформления этих элементов:

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

Этап 8: Разработка подвала

Наконец, пришло время разработать подвал, который представит нашим посетителям важную информацию в виде ссылок на ваши страницы в социальных сетях, контактные данные, а также ленту статусов из сети микроблогинга Twitter.

Начинаем с копирования фона шапки и перемещения её вниз, до самого подвала.

Заголовок «Get In Touch» (будьте на связи) был выполнен с помощью шрифта Myriad Pro размером в 20pt, как и другие заголовки.

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

В первом разделе мы разместим форму контакта. Итак, создайте прямоугольник, который будет служить полем для ввода имени.

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

Мы придадим форме привлекательный выгравированный эффект за счет следующих стилей:

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

Теперь создайте оставшиеся поля путем копирования готового.

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

Кнопка подтверждения была создана посредством копирования побуждающего к действую элемента в центре страницы и последующего укорачивания ее длины на приблизительно 25%. Тексту «Send» (отправить) мы так же задали небольшой эффект тени.

В центральном разделе подвала мы просто добавляем ссылки на страницы в социальных сетях посредством иконок BuddyIcons.

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

Что касается области с трансляцией статусов из сети Twitter, то здесь мы просто копируем 3 последних твита (или используем текст-наполнитель). Здесь мы также использовали иконку Twitter, разработанную mfayaz.

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

Мы почти закончили! Последнее, что нам осталось сделать, добавить информацию об авторском праве. После того, как вы сделаете это, выделите все слои подвала, сгруппируйте их, и назовите группу «footer».

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

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

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

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

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


Спонсоры проекта
Баннер в сайдбаре 1 (сквозной)
Баннер в сайдбаре 2 (сквозной)
Туры в Москву с экскурсиями
Туры на выходные, Новый Год и Рождество по Золотому и Серебряному Кольцу
kalita-tour.ru
Спонсоры проекта
Баннер в сайдбаре 3 (сквозной)
Баннер в сайдбаре 4 (сквозной)
Купить замки электронные для гостиниц
без переплат. Возможность купить онлайн или в офисе
norweq.ru
Популярные публикации







Свежие шаблоны сайтов каждый день
С миру по нитке
«    Март 2024    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
25262728293031