Когда вы совершаете покупки по ссылкам на нашем сайте, мы можем получать партнерскую комиссию. Вот как это работает.
Photoshop имеет большое количество преданных пользователей благодаря богатству функций, опций и контента, созданного пользователями. Этот список 250 лучших ресурсов Photoshop говорит красноречивее всяких слов о популярности инструмента. И многие приверженцы идеального пикселя по-прежнему чувствуют себя более комфортно, создавая свои макеты в Photoshop, чем в его прямых конкурентах и более специализированных инструментах для создания макетов.
Привлекайте клиентов и работайте эффективнее с нашей БЕСПЛАТНОЙ электронной книгой: получите ее прямо сейчас!
Photoshop можно использовать для создания феноменальных макетов, если вы знаете соответствующие функции — некоторые из его функций могут показаться излишними для веб-дизайна, если вы не сильно редактируете изображения.
Давайте рассмотрим несколько советов по созданию макетов в Photoshop (на основе
совет от PlasticMinds и наш собственный опыт), а также как сделать этот опыт более совместным.01. Воспользуйтесь преимуществами фигур и слоев фигур.
Точно так же, как каркас обеспечивает базовый контур макета, фигуры и слои фигур являются хорошей отправной точкой для вашего макета PS. (В качестве бонуса все слои также сохраняются, если вы импортируйте файл Photoshop в наше приложение UXPin.).
Photoshop предоставляет вам множество возможностей для создания этих основных фигур, и их размер можно легко изменить для последующего редактирования. Джейк Рошельо согласени отмечает, что если вы внимательно посмотрите на большинство опубликованных веб-сайтов, вы все равно сможете найти оригинальные формы, используемые для заголовков, панелей навигации, кнопок и виджетов боковой панели.
Этот урок объясняет основы фигур и слоев фигур.
02. Используйте четкое сглаживание для шрифтов (когда это возможно).
Это подготовит ваш макет к рендерингу в браузере. Но это может работать не для всех шрифтов, поэтому в случае сомнений обратитесь к своему разработчику.
Чтобы узнать больше о сглаживании шрифтов, посетите этот урок. Если вы хотите узнать больше о типографике в конкретном контексте веб-дизайна, ознакомьтесь с бесплатной электронной книгой. Лучшие практики веб-дизайна пользовательского интерфейса.
03. Выбирайте веб-безопасные шрифты в качестве резервной копии.
Не имеет значения, насколько великолепно выглядит ваш шрифт, если он несовместим с CSS/HTML. С другой стороны, текст браузера может индексироваться поисковыми системами, использоваться программами чтения с экрана (для слабовидящих) и облегчать перевод. Лучше всего начать использовать их (разумеется, за исключением Comic Sans или Papyrus).
Google Шрифты — крупнейший источник бесплатных веб-безопасных шрифтов (ознакомьтесь с подборкой шрифтов на сайте awwwards). 20 лучших). С другой стороны, Adobe Typekit стоит своих денег: у нашей компании годовая подписка и более 4200 шрифтов более чем достаточно.
04. Если существует несколько версий страницы, используйте разные группы.
Если вы создаете несколько версий макета, обычно вы просто изменяете основной контент. Верхний, нижний колонтитул и боковая панель, вероятно, не будут затронуты. Чтобы ускорить работу и помочь вам оставаться организованным, вы можете создавать такие папки, как:
- контент - домашняя страница
- контент – главное фото
- контент – призыв к действию
В каждой версии вы можете просто включить или выключить видимость. Всякий раз, когда мы работаем в Photoshop, это повышает эффективность нашего макета.
Следующая страница: еще 3 лучших метода создания макетов в Photoshop
