—»     —»   Уроки Photoshop: разрабатываем страницу социальной сети
  Раздел: Образование и Изучение   Комментариев: 3  

Уроки Photoshop: разрабатываем страницу социальной сети

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

Результат

Уроки Photoshop: разрабатываем страницу социальной сети

Этап 1

Уроки Photoshop: разрабатываем страницу социальной сети

Создаём новый документ с разрешением 1024х1110 пикселей. Это первый этап разработки шаблона.

Этап 2

Уроки Photoshop: разрабатываем страницу социальной сети

Добавьте простенький светло-серый фон. Затем в левую часть шаблона добавьте небольшой блок синего цвета. Это будет первая из 3-х частей, на которые мы разделим нашу тему оформления. Добавьте эффект тени «Drop Shadow» с указанным цветом: #0f4a68.

Этап 3

Уроки Photoshop: разрабатываем страницу социальной сети

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

Этап 4

Уроки Photoshop: разрабатываем страницу социальной сети

В только что созданный квадратный блок добавьте изображение.

Этап 5

Уроки Photoshop: разрабатываем страницу социальной сети

Создайте маленький темно-синий многоугольник, а затем добавьте белую линию толщиной 1 пиксель по обе стороны многоугольника. Внесите ещё какой-нибудь текст в многоугольник, а затем добавьте простой белый текст «На главную» («Homepage») под ним.

Этап 6

Уроки Photoshop: разрабатываем страницу социальной сети

Теперь нам надо сделать три отделения с одинаковым стилем текста, а также добавить 3 маленьких пиксельных пиктограммы.

Этап 7

Уроки Photoshop: разрабатываем страницу социальной сети

Добавьте темно-синий многоугольник, а затем белый контур (Как показано на изображении). Далее, используя тот же стиль и текст, добавьте текст «Контакт с разработчиком» («You May Want to Contact Me»). Добавьте светло-синий квадрат и некоторые контактные данные, используя всё тот же стиль и шрифт белого цвета.

Этап 8

Уроки Photoshop: разрабатываем страницу социальной сети

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

Этап 9

Уроки Photoshop: разрабатываем страницу социальной сети

Для последнего созданного многоугольника создайте линию разделения в 1 пиксель шириной, а затем добавьте текст «Talent» и несколько цифр (например: 1234).

Этап 10

Уроки Photoshop: разрабатываем страницу социальной сети

Сделайте копию последнего многоугольника и отделений, и просто измените написанный текст со слова Talent на слово «Assets».

Этап 11

Уроки Photoshop: разрабатываем страницу социальной сети

Создайте маленькую многоугольную кнопку и добавьте к ней эффект наложения градации (Gradient Overlay) с параметрами, указанными на изображении.

Этап 12

Уроки Photoshop: разрабатываем страницу социальной сети

Теперь добавьте контур с цветом, отображенным на скриншоте.

Этап 13

Уроки Photoshop: разрабатываем страницу социальной сети

Скопируйте многоугольную кнопку, которую вы создали в последних двух этапах, а затем добавьте какой-нибудь текст в обе кнопки.

Этап 14

Уроки Photoshop: разрабатываем страницу социальной сети

Теперь, для улучшения вида области, отображенной на изображении, мы добавим 2 маленьких иконки к секциями «Assets» и «Talent».

Этап 15

Уроки Photoshop: разрабатываем страницу социальной сети

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

Этап 16

Уроки Photoshop: разрабатываем страницу социальной сети

Мы закончили 1/3 нашего шаблона. Теперь залейте серым цветом примерно 3/5 всего пространства (как показано на изображении), а затем добавьте эффект тени.

Этап 17

Уроки Photoshop: разрабатываем страницу социальной сети

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

Этап 18

Уроки Photoshop: разрабатываем страницу социальной сети

Добавьте темно-серую навигацию и добавьте небольшой эффект черно-белой тени.

Этап 19

Уроки Photoshop: разрабатываем страницу социальной сети

Добавьте немного привлекательных пиктограмм к каждому элементу навигации.

Этап 20

Уроки Photoshop: разрабатываем страницу социальной сети

Создайте (используя ручку – Pen) простую форму, которая будет использоваться для ввода текста.

Этап 21

Уроки Photoshop: разрабатываем страницу социальной сети

Добавьте некоторый текст наполнения, время публикации и 2 пиктограммы + текст, который бы отличался цветом (был бы одного цвета с размещённой иконкой).

Этап 22

Уроки Photoshop: разрабатываем страницу социальной сети

Создайте еще одну, более маленькую полосу, а затем примените эффект тени.

Этап 23

Уроки Photoshop: разрабатываем страницу социальной сети

Добавьте контур толщиной в 1 пиксель, используйте цвет, указанный на скриншоте.

Этап 24

Уроки Photoshop: разрабатываем страницу социальной сети

Добавьте некоторый серый текст в полосу, которую вы только что добавили.

Этап 25

Уроки Photoshop: разрабатываем страницу социальной сети

Создайте маленький темно-синий многоугольник, а затем примените к нему эффект внутренней тени (Inner Shadow).

Этап 26

Уроки Photoshop: разрабатываем страницу социальной сети

Продолжите, добавив эффект наложения градации, используя цвета, указанные в скриншоте.

Этап 27

Уроки Photoshop: разрабатываем страницу социальной сети

Заключительный этап создания кнопки – примените отображенный эффект контура.

Этап 28

Уроки Photoshop: разрабатываем страницу социальной сети

Добавьте немного текста, а затем добавьте эффект, отображенный на картинке.

Этап 29

Уроки Photoshop: разрабатываем страницу социальной сети

Рядом с последней созданной кнопкой создайте синий квадрат.

Этап 30

Уроки Photoshop: разрабатываем страницу социальной сети

Добавьте незначительный эффект наложения градации к последнему созданному квадрату.

Этап 31

Уроки Photoshop: разрабатываем страницу социальной сети

Закончите его, добавив контур толщиной в 1 пиксель.

Этап 32

Уроки Photoshop: разрабатываем страницу социальной сети

Для того чтобы сделать серый многоугольник привлекательнее, нам нужно добавить маленькую, но высококачественную пиктограмму.

Этап 33

Уроки Photoshop: разрабатываем страницу социальной сети

Этап 34

Уроки Photoshop: разрабатываем страницу социальной сети

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

Этап 35

Уроки Photoshop: разрабатываем страницу социальной сети

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

Этап 36

Уроки Photoshop: разрабатываем страницу социальной сети

Теперь скопируйте и вставьте созданную в прошлом этапе область, и на этом мы завершили 2/3 нашего шаблона.

Беглый обзор шаблона

Уроки Photoshop: разрабатываем страницу социальной сети

Посмотрите на прогресс

Этап 37

Уроки Photoshop: разрабатываем страницу социальной сети

Создайте серую полосу, расположенную в верхней части боковой панели. Добавьте текст «google ads», так как здесь будет расположен рекламный баннер.

Этап 38

Уроки Photoshop: разрабатываем страницу социальной сети

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

Этап 39

Уроки Photoshop: разрабатываем страницу социальной сети

Добавьте небольшой эффект наложения градации на последний созданный многоугольник.

Этап 40

Уроки Photoshop: разрабатываем страницу социальной сети

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

Этап 41

Уроки Photoshop: разрабатываем страницу социальной сети

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

Этап 42

Уроки Photoshop: разрабатываем страницу социальной сети

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

Ключевые тэги: Photoshop, социальные сети
Опубликовал Mysterious Master   Прочитано (раз): 10444   |   Оставлено комментариев: 3
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 21 июня 2011 @ 23:42
Написал: KpeaTuFF — группа: Читатели  
На сайте с: 9.06.2010   |   Публикаций: 0   |   Комментариев: 5
ICQ: --- не указано ---
Как правило, если разрабатывается дизайн под разрешение 1024 px в ширину, то макет строится с шириной в 1003 px.
А в целом - очень хорошо)
Комментарий #2: 8 июля 2011 @ 13:08
Написал: Simon — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
красиво
Комментарий #3: 12 февраля 2012 @ 15:31
Написал: kulagin_ds — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Супер дизайн. Статья очень помогла!
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

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

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


Спонсоры проекта
Баннер в сайдбаре 1 (сквозной)
Баннер в сайдбаре 2 (сквозной)
Спонсоры проекта
Баннер в сайдбаре 3 (сквозной)
Баннер в сайдбаре 4 (сквозной)
Популярные публикации







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