Дополнения

Бесплатная рассылка

Вы будете получать ссылки на свежие видеоуроки по фотошопу совершенно бесплатно

крупнейшая в мире социальная сеть пользователей Adobe Photoshop

207 785 чел. 399 346 работ 4 090 уроков
  • Обучайтесь и совершенствуйтесь
  • Разместите своё портфолио
  • Участвуйте в конкурсах
  • Подписывайтесь и оценивайте
  • Комментируйте и общайтесь
Присоединиться

Сложность: Средняя

Создаём дизайн для страницы блога в Фотошоп

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

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

Посмотреть полноразмерный концепт темы блога

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

Примечание переводчика: ссылка указанная автором нерабочая. Предлагаю использовать эту кисть.

Выберите инструмент Прямоугольная область  (Rectangular Marquee Tool) и нарисуйте квадратное выделение где-нибудь в центре. Инвертируйте выделение и удалите излишки. Методом проб и ошибок нужно найти секцию, которая повторяется без видимых углов.

Уменьшите непрозрачность (Opacity) текстуры примерно до 30%, потом посмотрите, корректно ли она повторяется при дублировании на большую площадь. Используйте инструмент  Штамп (Clone Tool), чтобы удалить все не желаемые частички в оригинальном файле.

С выбранным файлом оригинальной текстуры перейдите в меню Редактирование > Определить узор (Edit > Define Patterns), чтобы сохранить образец. Заполните фон файла с дизайном только что созданным узором.

Обведите зону размером 960px в центре документа и залейте ее белым. Я использую инструмент  Прямоугольная область (Rectangular Marquee Tool), кликнув правой кнопкой мыши по выделению и выбрав Трансформировать выделенную область (Transform Selection). В верхней панели вы можете ввести точные размеры.

Добавьте прямоугольнику с контентом тонкую Тень (Drop Shadow). Я использую такие настройки - 6% Непрозрачность (Opacity), 0 Смещение (Distance), 0 Размах (Spread) и размер (Size) 10px. Также добавьте слою очень тонкий серый штрих размером 1px, чтобы отделить грань.

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

Добавьте Наложение градиента (Gradient Overlay), используя режим Наложение (Overlay blending mode). Уменьшите непрозрачность (Opacity), чтобы смягчить воздействие градиента и оставить мягкую смену цвета.

Добавьте штрих размером 1px более темного красного оттенка, затем добавьте эффект Внутреннее свечение (Inner Glow), используя более светлый оттенок. Отрегулируйте настройки так, чтобы Режим наложения (Blending mode) был нормальным (Normal), стягивание (Choke) 100%, размер 1px.

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

Пора добавить текст нашему логотипу. Здесь я использовал шрифт American Typewriter, с размером и корректировками для слова "Stub".

Примечание переводчика: ссылка, указанная автором нерабочая, вы можете воспользоваться этой ссылкой.

Вставьте пару звездочек из Illustrator и добавьте легкую тень к тексту, чтобы закончить наш логотип в стиле ретро билета в кино.

Добавьте пару иконок для RSS и Twitter в верхней правой части.

Примечание переводчика: ссылка,указанная автором нерабочая, вы можете воспользоваться этой ссылкой.

Весь текст в шаблоне будет с шрифтом Helvetica, в то время как темно красный был выбран для цвета всех ссылок.

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

Сгенерированный "рыбный" текст можно использовать, чтобы представить вводный контент поста. Установите шрифт на разборчивые 14px с достаточной высотой линии около 24px, чтобы увеличить читабельность. Черный шрифт основного текста на белом фоне слишком контрастирует, поэтому смягчите его к светло-серому.

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

Настройте эффект Внутреннее свечение (Inner Glow), используя Режим наложения (Blending mode) - нормальный (Normal), 100% стягивание (Choke), размер 1px, чтобы создать эффект двойной границы.

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

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

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

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

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

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

Используйте инструмент Овальная область  (Elliptical marquee) как основу для иконки увеличительного стекла. Кликните правой кнопкой мыши и выберите Выполнить обводку (Stroke), чтобы придать выделению белую обводку толщиной 2px, затем закончите иконку, дорисовав рукоятку при помощи инструмента Линия  (Line Tool)

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

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

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

Завершите дизайн ссылкой возврата к верху страницы, снова создав маленькую иконку, основываясь на том же стиле, как те, что в зоне заголовка.

На этом мы завершаем наш концепт главной страницы шаблона. В следующей статье мы начнем нарезать шаблон и создавать его как страницу, написанную на HTML и CSS.

Посмотреть полноразмерный концепт темы блога

Автор: Chris Spooner

Комментарии 15

(до 5 шт)
jpg, png, gif, общий вес файлов не более 7Мб, не менее 450px по ширине и высоте, jpg или анимированный gif
Ссылки внутри комментариев могут вести только на эти сайты

Алексей, спасибо за перевод! Интересно.

Спасибо. Только где искать "следующую статью", в которой создается страницу, написанная на HTML и CSS ? Можно ссылку?

спасибо за перевод статьи.

Не совсем понятный перевод, но все равно все получилось)

Ужас! С самого начала, урок ни о чем. Если понял кто-то, то им и не нужен этот урок. "Откройте Photoshop и добавьте пятно тонкой гранжевой кисти в центре документа." Какой документ???? Откуда он взялся??? Требуется пояснение. Какие размеры документа? Если произвольные, то надо так и написать. На этом сайте не только профи, но и начинающие есть. В общем, ужасный урок!(((

Алексей, уровень сложности этого урока средний и предполагает, что вы как минимум знаете, как создавать документ и какого размера он должен быть. Если вы не можете этого сделать, возможно, вам следует выбирать уроки с пометкой "легко". А урок очень хороший

Добавить комментарий / работу

Новые работы пользователей

{{work.views}}

По заданным фильтрам работы не найдены

Попробуйте изменить критерий поиска, или сбросить фильтры


Смотреть все работы

Наверх

Авторизация

Забыли?

Регистрация

Не удалось загрузить работу. Возможно она была удалена.
GIF {{work.bite}} Мб Загрузить
18+
Работа имеет содержимое для 18+ лет
Мне нравится {{work.likes}} {{work.views}} Жалоба

Оставить комментарий {{work.childs.length || 0}}

(до 5 шт)
jpg, png, gif, общий вес файлов не более 7Мб, не менее 450px по ширине и высоте, jpg или анимированный gif
Ссылки внутри комментариев могут вести только на эти сайты
Войти Авторизуйтесь, чтобы комментировать работы, ставить лайки и просто быть участником нашего дружного сообщества!
Сначала популярные Сначала старые Сначала новые
Добавить комментарий
Разбор работы по просьбе автора:
Популярные работы автора:
Курсы и уроки автора:
Онлайн-курс {{work.relless.type}}

Жалоба

Опишите суть жалобы, при необходимости добавьте ссылки на скриншоты

Спасибо! Ваше обращение ушло на рассмотрение.

Название работы

Описание работы (необязательно)

Комментарий

Ваша миниатюра:


Название:
{{name}}
Описание:

{{text}}

Исходник:

{{source.name}} {{source.name}}

Тэги:
#{{tag.label}}

Есть ли у вас исходник к работе?

Исходник — это файл из исходных изображений, которые использовались для создания вашей работы. Исходник позовляет лучше понять вашу работу. Он не обязателен, но работы с исходниками получают больше лайков и имеют право на участие в еженедельных конкурсах.
jpg-файл, максимальный размер 1920x1080px

Пример исходника

Выберете тэги работы:

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

Не более десяти тэгов на одну работу

Вашу работу разберет один из экспертов проекта «Фотошоп-мастер». Это позволит вам увидеть свои ошибки и сделать следующую работу лучше. Разбор будет сделан в комментариях к работе и будет виден всем пользователям.

Пункт «18+» допустимо ставить только для работ, действительно содержащих элементы, которые не должны видеть несовершеннолетние: обнаженка, сцены жестокости, и т.д. Запрещается ставить такую метку на обычные работы. За подобное поведение у пользователя будет блокироваться возможность добавления новых работ. Все понятно, больше не показывать

После добавления работы:


Запланировать публикацию

Запланировать

Правила загрузки работ на «Фотошоп-Мастер»

  • 1. На сайте запрещается размещать изображения, которые содержат нецензурную лексику, угрозы, оскорбляет, унижает чье-либо достоинство, а также явно или косвенно нарушает законодательство Российской Федерации.

  • 2. Сайт photoshop-master.ru приветствует соблюдение авторских прав. В случае возникновения споров или разногласий Администрация сайта приложит все усилия для разрешения сложившейся ситуации.

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

Подробная информация о правилах публикации https://photoshop-master.ru/blog/post/rules