Основы веб-дизайна: обучающий мини-курс | Уроки Фотошопа (Photoshop)
Представляю вам мини-курс по основам веб-дизайна. Курс записывался на youtube в течение двух лет. Разумеется, это не исчерпывающий курс по веб-дизайну, и он не заменит полноценного обучения.
Тем не менее, после этого курса вы сможете стартовать в профессии (постоянно углубляя свои знания и навыки). Здесь разобраны самые необходимые для старта темы (на чем строится веб-дизайн, как общаться с заказчиком, и как именно работать в фотошопе).
Курс построен следующим образом: сначала дается вводная теоретическая информация (модульные сетки, бриф, прототипирование, коммуникация с заказчиком), затем сразу приступаем к практике (создание главной и внутренней страниц с адаптивными версиями). Вся информация привязана к конкретному проекту, т.е. это не абстрактные рассуждения и не дизайн абстрактной страницы в вакууме.
Вы можете посмотреть, что получилось по итогам курса на behance странице проекта
1.
Основы веб дизайна #1 — модульные сетки (Grid Systems)Сайты с сетками, которые упоминались в уроке:
Сайты для создания модульных сеток:
2. Основы веб дизайна #2 — Постановка задачи, работа с заказчиком, бриф, тз
Второй модуль курса. Здесь разбираемся с ключевыми для любого дизайнера темами: пониманием задач бизнеса, коммуникацией с заказчиком, составлением брифа и технического задания (тз). Во втором видео составляем бриф для проекта, над которым мы будем работать на протяжении этого курса.
Ссылки на документы, упомянутые в видео:
3. Основы веб дизайна #3 — Прототипирование (Prototype — Photoshop, Muse, Axure, Online services)
Третий модуль курса — введение в тему прототипирования. Рассмотрим основные понятия, сервисы и программы для создания прототипов. Поговорим в каких случаях прототипы незаменимы, а в каких могут оказаться откровенно вредны.
Сервисы:
Упомянутые программы:
4. Основы веб дизайна #4 — Создание главной страницы
В четвертом модуле от теории переходим к практике — создаем главную страницу. Это самый объёмный модуль курса.
Помимо демонстрации рабочего процесса в фотошопе мы поговорим о необходимых инструментах и рассмотрим базовые принципы дизайна.
5. Основы веб дизайна #5 — Страница категории
В пятом модуле демонстрируется процесс создания внутренней страницы сайта (страница категории в нашем случае). Также мы рассмотрим важные моменты, которые необходимо учитывать при разработке внутренних страниц (единство навигации и стиля, понимание структуры и т.д.).
6.
Основы веб дизайна #6 — Мобильная (адаптивная) версияЗавершающий, шестой модуль курса познакомит вас с процессом создания адаптивной версии сайта. Здесь вы узнаете только о самых базовых вещах, т.к. тема адаптивного дизайна (и тем более дизайна мобильных приложений) заслуживает отдельного курса (и даже не одного).
На этом всё. Буду рад, если вы напишете в комментариях свои впечатления от курса.
какой из этих инструментов веб-дизайна подходит именно вам?
Отныне Photoshop уже не является королем сферы графического и веб-дизайна. В последнее время разгорается все больше дискуссий по поводу использования Sketch – нового приложения для iOS – вместо популярного проекта Adobe. Это самое впечатляющее противостояние в сфере инструментов для веб-дизайна 2016 года.
Изначально Photoshop не был направлен на веб-дизайнеров. Как-никак, он ведь называется PHOTOshop. Это уже после всего он был так назван. Но cо временем Photoshop стал наиболее используемым инструментом среди графических и веб-дизайнеров, а также создателей веб-сайтов. Это больше, чем инструмент для редактирования фотографий и картинок, – его интерфейс, насыщенный разнообразными опциями и функциями, вдохновил многих дизайнеров на создание целых веб-страниц в Photoshop.
Но, как пел Боб Дилан, времена меняются, и Photoshop придется немного подвинуться, чтобы уступить место кому-то помоложе и посильнее. Новое приложение Sketch от Bohemian Coding кажется более гибким, функционально-насыщенным и простым в использовании. Кажется… это ключевое слово. Практически постоянно ведутся дебаты насчет того, может ли Sketch полностью заменить продукты компании Adobe для веб-дизайнеров.
По правде говоря – это действительно нелегкий выбор между Photoshop и Sketch.
Sketch лидирует в некоторых позициях, но в других вы определенно будете склонны использовать Photoshop. Давайте рассмотрим, почему.
Плюсы и минусы Photoshop
Photoshop – знакомый инструмент для 99% веб-дизайнеров. Вот почему он так популярен. Большинство дизайнеров довольно ленивы и не изменяют своим привычкам, так что процесс изучения нового инструмента точно не принесет им удовольствия. Когда вы привыкаете к какому-либо программному обеспечению, гораздо быстрее выполнять определенные действия в нем, чем изучать новые функции и “быстрые” клавиши.
Photoshop может использоваться как с Windows, так и с iOS, что делает его доступным для многих пользователей. Поскольку Adobe представил свои приложения Photoshop Mix и Photoshop Fix для iPad, у дизайнеров теперь есть возможность редактировать изображения или создавать макеты на ходу.
Однако ценовая политика компании Adobe последнее время снижает ваши шансы на использование Photoshop. Поскольку команда Adobe сменила ценовые предложения на ежемесячные планы подписки (полагаю, вы все знаете о Creative Cloud), многие дизайнеры отказываются от инструментов Photoshop, останавливая свой выбор на более доступном программном обеспечении, или прекращают обновлять свои Photoshop CS6 версии.
Однако, в Photoshop CC все еще есть одна особенность, благодаря которой веб-дизайнеры до сих пор используют программное обеспечение Adobe. Creative Cloud Libraries позволяет обеспечить сохранность всех ваших объектов и без лишних сложностей делиться ими между различными устройствами и продуктами Adobe, такими как Illustrator, InDesign и т.д.
Прорыв Sketch заставил Adobe присмотреться к своей продукции и задуматься об усовершенствованиях, чтобы не отставать от конкурентов. Следуя ожиданиям пользователей, Photoshop недавно добавил функцию экспорта, которую успели высоко оценить пользователи Sketch. Вы можете экспортировать все ваши файлы, элементы, создавать дополнительные расширения для изображений и объектов в несколько кликов.
Photoshop теперь имеет Артборды – инструмент, с которым уже знакомы те, кто пользовался Illustrator и Sketch. Этот креативный элемент позволяет вам иметь несколько «полотен» в пределах одного документа, что сэкономит время? которое раншье тратилось на открытие различных документов для преобразования объектов и обмена элементами.
Аналогичные функции можно обнаружить в смарт- объектах, которые уже присутствуют в Photoshop некоторое время.
И появился Sketch…
Sketch существует всего несколько лет и уже завоевал широкую аудиторию преданных поклонников. Вы можете найти множество дискуссий на Quora с тысячами комментариев, где отстаивают Sketch. Профессиональные веб-дизайнеры делятся своим опытом в полном отказе от Photoshop и переходе на Sketch. о полном отказе от Photoshop и переключаться на Sketch.
И это не удивительно, так как Sketch предоставляет некоторые функции, которых нет в Photoshop. Это приложение, которое не потребляет много оперативной памяти и “весит” очень мало. В отличие от Photoshop, приложение Sketch предлагает менее громоздкое меню с большим количеством кнопок на панели инструментов. На первый взгляд их расположение может показаться немного тесным, но как только вы привыкаете к ним – они становятся достаточно удобными в пользовании. правильный выбор.
Sketch содержит встроенные сетки, которые позволяют работать с элементами дизайна быстрее и более слаженно.
В сочетании со множеством пресетов шаблонов и пресетами в Артбордах, процесс создания дизайнов становится увлекательной игрой.
Конечно, многие дизайнеры отмечают, что Sketch не предоставляет широкий набор инструментов, как Photoshop. А еще у Photoshop есть бесплатные экшены, которые являются одними из самых удивительных изобретений, позволяющих сэкономить время для создания различных эффектов. Для расширения функциональности Sketch необходимо установить различные плагины. Однако эти плагины становятся настоящим “сундуком сокровищ”, если вы их установите. Они добавляют приложению удивительные возможности, которые вы не сможете найти в Photoshop. По крайней мере сейчас, ведь, как я уже упоминал выше, Sketch вдохновил Photoshop создать свою собственную версию Артбордов, так что – кто знает…
Несколько основных особенностей Sketch
Давайте посмотрим, в каких областях Sketch превосходит Photoshop, и какими функциями и плагинами вы можете пользоваться.
Фокус на векторных изображениях
Sketch отреагировал на одну из самых популярных тенденций веб-дизайна последнего времени и стал полностью ориентированным на векторный дизайн и изображения.
Эти легчайшие файлы появились в ответ на важность адаптивного дизайна и растущее использование экранов высокой четкости (да, Sketch идеально походит для применения на дисплеях Retina от Apple).
Создание макетов для различных размеров экрана всегда было трудоемким процессом, который требует большого количества времени. Sketch предлагает несколько инструментов, которые позволяют вам свободно и легко менять размер элементов. Его Mirror Plugin позволяет видеть, не отходя от кассы, как объекты будут выглядеть на экране iPhone или iPad. Никаких больше размытых линий, каждый пиксель учтен.
CSS логика
Но настоящая магия кроется в том, как Sketch использует стили CSS. Приложение включает логику CSS и позволяет создавать дизайны, которые позже могут быть легко преобразованы в элементы CSS. Это практически стирает грань между веб-дизайном и разработкой. Вы создаете кнопку и с правым щелчком мыши можете выбрать и скопировать стили CSS, готовые к использованию в макете.
Кроме того вы можете преобразовать созданный элемент в символ, который может использоваться во всем дизайне. Что такое символы? Это следующая особенность Sketch, которую я хотел бы отметить.
Символы и динамические кнопки
С помощью этих двух плагинов вы можете улучшать ваш дизайнерский опыт и повысить его до более высокого уровня разработки. Таким образом, группы элементов можно преобразовать в Символ. В этой группе вы можете играть с цветом, размером, шрифтом, изображением и т.д. И затем, когда все будет готово, вы можете использовать этот символ для всех таких элементов на сайте. Это значит, что вы буквально можете создать универсальный вид макета вашего веб-сайта. При применении изменений к одному из элементов в группе символов, он будет отображаться для всех таких элементов на каждой странице или в посте блога и т.д. И вам не нужно вручную воспроизводить этот элемент на каждой странице.
Плагин динамических кнопок делает то же самое для всех кнопок в вашем проекте.
Если вы вынуждены работать на страницах с несколькими кнопками, этот плагин является реальным спасением. Он автоматически создает символ для вашей кнопки, добавляя отступы вокруг него. А когда вы добавляете на кнопку текст, она автоматически подстраивается под количество его символов.
Текстовые стили и управление цветом в Sketch
Sketch позволяет вам легко управлять оформлением и цветовой гаммой в рамках проекта. Для оформления можно создавать различные текстовые стили для встроенных элементов, таких как заголовки или текстовые блоки. Затем эти тексты применяются ко всем элементам того же вида в вашем проекте. Вносить изменения в текстовые стили проще простого. Если вы решили отменить шрифт для заголовка h3 и заменить его более подходящим, измените его один раз, а Sketch сделает все остальное. Изменения будут применены автоматически для всех h3 в вашем проекте.
Настройка цвета работает аналогичным образом. Можно создать цветовую палитру для всего веб-сайта на Moodboard (большое дополнение к Артбордам, что позволяет вам сохранить ваши файлы и элементы по щелчку одним кликом мышки).
Цвета, которые вы желаете видеть в ваших дизайнах, будут храниться в Moodboards, и вы с легкостью сможете использовать любой из них для вашего следующего проекта. Кроме того Sketch позволяет получить доступ ко всем вашим файлам в одном Артборде, вы можете легко копировать и вставлять любой элемент стиля, включая его характеристики, цвета и стили для любого другого объекта, выбранного вами.
Что вы можете в одном приложении, но не можете в другом?
Я полагаю, вы уже впечатлены теми возможностями, которые предоставляет Sketch. Но не спешите выбрасывать ваш ПК и покупать Macbook, чтобы начать использовать Sketch. Возможно, вам сначала нужно просто посмотреть на то, что Sketch не может сделать для ваших проектов и что Photoshop может?
- Редактирование изображений. Поскольку Photoshop был создан для редактирования фотографий, он позволяет идеально редактировать такого рода файлы. Его функционал и инструменты для редактирования изображений также превосходят возможности Sketch, что оставляет за Photoshop место короля в этой области.
- Управление цветом. В вопросах управления цветом Photoshop выигрывает и эту битву. Он позволяет использовать все доступные цвета в любых вариациях. Sketch пока менее заточен на колористику элементов.
- Простота в использовании. Photoshop имеет в своем распоряжении множество “горячих” клавиш, чтобы ускорить рабочий процесс. Тем не менее, Sketch не отстает от него благодаря своей универсальной административной панели. Вы можете адаптировать его панель инструментов к вашим потребностям и сделать работу с ним более удобной для себя.
- Возможности веб-дизайна. С учетом всего, сказанного выше, Sketch является удивительным приложением для создания пользовательского интерфейса. В нем есть все, что может понадобиться дизайнеру пользовательского интерфейса: векторные элементы,изначальная адаптивность элементов, невесомые файлы, сетки и т.д.
Итог
Какой инструмент выбрать? Это главный вопрос, который вы могли задавать себе, читая статью.
Честно говоря, решать только вам. Я просто предоставил краткое сравнение и подробные данные об обоих инструментах.
Photoshop тяжелее, сложнее и дороже (если вам нужно использовать Creative Cloud). Sketch достаточно легкий, кажется намного проще в использовании и стоит сейчас всего $99. В любом случае, вам все равно придется сначала научиться им пользоваться. Это не тот инструмент, которые вы можете скачать и начать проектировать с нуля, как профессионал. И не забывайте: вы должны иметь девайс, работающий на iOS для использования Sketch. Эти ограничения немного разочаровывают.
Если вы являетесь счастливым обладателем девайса от Apple, знакомы со сферой веб дизайна и ориентируетесь на создание цифровых дизайнов (не для печати) – просто попробуйте Sketch. Это дает вам свободу во многих случаях. Он облегчает рабочий процесс в создании адаптивного дизайна, он позволяет вам разрабатывать макеты веб-сайта без лишних затрат времени и усилий, настраивать и корректировать их и даже экспортировать CSS код в несколько кликов.
Я не знаю, вытеснит ли Sketch в ближайшее время Photoshop, но для дизайна веб-сайтов и пользовательских интерфейсов (не редактирования фотографий и изображений) он является именно тем приложением, к которому стоит присмотреться.
5 инструментов для создания адаптивного дизайна, которые лучше, чем Photoshop
Photoshop – популярнейшая программа среди дизайнеров, а с такими расширениями, как CSS3Ps и FontAwesomePS это хороший инструмент для разработки прототипов веб-сайтов. Тем не менее, его создавали не для этой цели. А учитывая растущие требования к высокой адаптивности дизайна, CSS препроцессорам, CSS рамкам и независимой от разрешения графике (SVG), Photoshop теряет актуальность в сфере веб-дизайна.
Существует много альтернативных приложений, которые заполняют такие пробелы в создании адаптивного веб-дизайна. В этой статье мы рассмотрим инструменты для сайтостроения, чьи возможности превосходят Photoshop.
1. WebFlow
WebFlow позволяет проектировать веб-сайты способом оперирования drag-and-drop.
На боковой панели легко добавить стили и дополнительно настроить свойства элементов. Когда дизайн будет завершен, результаты проектирования можно экспортировать в код HTML и CSS. Также вы можете поделиться своей работой.
2. Avocode
Avocode поддерживает PSD файлы и позволяет редактировать и преобразовывать их в работоспособный сайт с HTML и CSS. Avocode извлекает все активы в ваш проект, в том числе CSS, изображения и SVG (если таковые имеются). Вы можете легко извлечь CSS в виде Less, SASS или Stylus для любого выбранного слоя с интегрированным CSSHat.
Avocode оснащен контролем версий, который позволяет вернуться к предыдущей конструкции на случай, если что-нибудь пойдет не так.
3. Macaw
Macaw позволяет создавать веб-макеты и веб-элементы, если вы работаете с таким графическим редактором, как Adobe Photoshop.
Вы можете создавать столбцы или колонки, настроить их расположение и установить необходимое оформление. Macaw позволяет изменять стиль нескольких элементов в одном месте. Вы можете использовать библиотеку, чтобы хранить все элементы для их последующего использования.
Для создания адаптивного дизайна Macaw позволяет устанавливать контрольные точки и оптимизировать свой сайт для всех устройств. Когда процесс проектирования будет завершен, Macaw может сгенерировать правильный HTML и CSS.
4. Sketch
Sketch идеально подходит для проектирования интерфейсов и веб-сайтов. Этот инструмент создает векторные объекты, а не растровые. Таким образом, если вы измените размер холста, дизайн не утратит качество. Такие функции, как «built-in grid» помогут лучше организовать размещение объекта или веб-макета.
Sketch отображает шрифты, похожие на то, что показывает Webkit (вероятно, Chrome, Opera и Safari). Таким образом, вы избавитесь от беспокойства по поводу не резкого и не точного отображения текста в браузере по сравнению с оригиналом.
5. Antetype
Antetype – векторное приложение, ориентированное на визуальный дизайн, которое отлично подходит для создания таких элементов интерфейса, как градиент, тень, внутренняя тень, тень для текста, стиль границы и скругленные углы. Antetype также предоставляет сотни виджетов, которые вы можете использовать в своём проекте.
Для создания адаптивного дизайна есть возможность установить контрольные точки, которые будут регулировать размер экрана. Вы также можете экспортировать каждый элемент в виде изображения или CSS.
Как делать веб дизайн в фотошопе. Рис.1 Быстрый старт в Фотошоп. Текст с приветствием
Прежде, чем мы начнем создавать макет сайта, нужно создать план-эскиз будущего макета, на котором будет видна его функциональность и приблизительный внешний вид.
Шаг 2. Создаем документ.
Мы будем создавать макет сайта шириной в 960 пикселов.
Для этого, создайте новый документ размером 1200х1500 пикселов. Разрешение 72 пиксела.
Поскольку вы уже сделали это, давайте немного поработаем. Теперь идет легкая роль, объедините эти файлы. На открывшемся экране вы просто перетащите файлы. Просто нажмите «Объединить файлы». Итак, ваше ядро календаря было создано! Теперь, когда вы уже знаете основы создания ядра, вы должны обратить внимание на некоторые детали, которые будут меняться в каждом случае. Скажем, ваше ядро начинается с левой стороны, поэтому оно полностью изменяется. Допустим, вы присоединились к субботам и воскресеньям, это снова меняется.
Еще одна деталь, о которой вы должны знать, — это сколько полей. Для вас важно знать, как закончится повестка дня, чтобы вы могли разработать макет, готовый к завершению без ошибок, поскольку для этого может потребоваться дополнительная или меньшая разница, чем в этом уроке.
Так, как макет сайта будет шириной в 960 пикселов, нам нужно определить эту область, добавив направляющие.
Перейдите в меню Выделение — Трансформировать выделенную область (Select > Transform Selection). На панели свойств в верхней части экрана установите значение ширины 960 пикселов. Это и будет рабочая область макета.
Все это вопрос наблюдения и адаптации, еще более подробное описание, как создание ядра календаря. Просто нажмите ссылку ниже. Пиксель представляет собой квадрат размером около 0, 4 мм, который составляет ваш экран. В Интернете есть много обучающих программ, которые не выглядят очень интуитивно понятными и удобными в использовании, поэтому сначала важно научиться знать и использовать свой инструментарий.
Программное обеспечение позволяет создавать идеальные кривые или графики, составляющие рисунок. Сила этого инструмента заключается в том, что качество изображения ясное и не меняется. Масштаб можно использовать для бесконечности, это не повлияет на качество изображения. Этот инструмент, вероятно, является самым сложным из 3, и что для неофитов наиболее трудно понять, представляется необходимым провести обучение, чтобы обнаружить основы инструмента.
Это программное обеспечение макета. Функциональность, которая не найдена на других двух инструментах, широко рекомендуется для печати бумажных документов.
Установите направляющие точно по границам выделения.
Нам нужно создать отступ между краями рабочей области макета и областью контента, который мы добавим позже. При активном выделении документа, снова перейдите в меню Выделение — Трансформировать выделенную область (Select > Transform Selection). Уменьшите выделение по ширине до 920 пикселов. Это означает, что с каждой стороны макета будет отступ в 20 пикселов, в итоге всего это 40 пикселов.
Действительно, программное обеспечение позволяет компоновать документы более сложными и творческими способами, чем базовые инструменты обработки текстов, и учитывает все особенности принтеров. Тем не менее, инструмент не позволяет визуальное редактирование или даже создание изображения, он затем представляется как дополнение к двум другим инструментам, но имеет важное значение. это самый простой инструмент, который можно взять в руки, интуитивно понятный, он доступен всем. Тем не менее, он предлагает набор инструментов, настолько обширный, что трудно использовать все возможности, предлагаемые инструментом, без обучения по этому предмету.
Установите направляющие по новому выделению:
Шаг 3. Создаем шапку сайта.
Переходим к созданию шапки сайта. Создайте выделение высотой в 465 пикселов в верхней части макета.
Эти 3 инструмента с отдельными функциями не могут заменить друг друга, в большинстве проектов вы, как правило, захотите использовать программное обеспечение 3. В основном используются в коммуникационных и маркетинговых кругах, они также выдвигаются с новой тенденцией.
Прежде всего, следует отметить, что создание качественных допечатных файлов не может быть импровизировано вообще! Действительно, играя ученика графического дизайнера в моде в нашу нынешнюю эпоху. И на данный момент действительно существует большой кошмар для принтера или даже менеджера проектов печати, чтобы получать электронное письмо от своего клиента с файлами для печати. К сожалению, сейчас эта ситуация очень распространена.
Залейте выделение серым цветом, а в дальнейшем используйте стили слоя, чтобы применять цвета и градиенты.
К шапке добавим градиентную заливку через стиль слоя Наложение градиента (Gradient Overlay). Создайте градиент из двух цветов.
Чтобы избежать такой ситуации, важно соблюдать стандартные процедуры печати при создании файла, который будет использоваться для печати. Если у вас уже есть модель, важно тщательно и качественно подготовить свои файлы, прежде чем отправлять их для печати. Чтобы ваш документ печатался правильно, вы найдете напоминание о наиболее важном соблюдении для чтения или перечитания перед созданием документа. Вот несколько советов, которые вы, безусловно, можете использовать для создания ваших файлов допечатной подготовки.
Кроме того, эти программные продукты позволяют визуально обрабатывать безупречное качество, используя при этом богатый поддон инструментов, который позволяет приступить к созданию всего, что предлагает воображение и вдохновение, и все, что требуется профессиональным стандартам в терминах макет и типографские правила.
Теперь шапка будет выглядеть так:
К шапке теперь нужно добавить подсветку. Создайте новый слой (Ctrl + Alt + Shift + N) и выберите мягкую кисть размером 600 пикселов. Выберите цвет #19535a и кистью кликните один раз в верхней центральной части шапки.
В то же время он позволяет обнаруживать и исправлять любые ошибки в файле более непосредственно во время записи. Следует также отметить, что принтеры имеют возможность получать и обрабатывать исходные файлы, обработанные графическим программным обеспечением, а также файлы изображений. В результате это влечет за собой множество ограничений, а именно обладание тем же программным обеспечением, что и совместимый клиент версии. Реализация файлов, собранных и завершенных клиентом, а также экспорт в изображение высокой четкости, которое, безусловно, не может быть исправлено.
Создайте на шапке выделение в 110 пикселов.
Нажмите клавишу Delete , чтобы удалить выделенную часть.
Слой с подсветкой отразите по вертикали (Ctrl + T) .
Добавление кровотока не должно быть запрещено
В общем случае файлы должны быть строго построены в окончательном формате документов для печати. Для очень больших размеров принтер может запрашивать пропорционально меньший размер, чем он увеличивается при переключении на машину. Более того, эта манипуляция не вызывает беспокойства в отношении разрешения и качества дизайна. Большие форматы должны быть видны издалека. И в то же время он позволяет графическому дизайнеру работать с файлами, гораздо менее тяжелыми с точки зрения веса.
Чтобы получить качественный документ, необходимо нанести отпечаток размером от 2 до 5 мм в зависимости от шаблона документа для печати. Это переполнение будет разрезано во время резки в конечном формате. Это также предотвращает появление белого края на краях документа для печати в случае небольшого сдвига бумаги в машинах. Для очень больших документов можно, конечно, увеличить или уменьшить расход воздуха в зависимости от парка машин и пожеланий принтера. Вы можете обсудить это непосредственно со своим провайдером.
Нужно убедиться, что световое пятно на шапке находится ровно по центру. Для этого, сделайте активными слои с шапкой и подсветкой и выберите инструмент Перемещение (Move
Tool) (V). На панели свойств в верхней части экрана нажмите кнопку Выравнивание центров по горизонтали (Align Horizontal Centers).
Выберите правильное разрешение и цветной режим для файла допечатной подготовки
И, наконец, окончательный формат должен предусматривать внутренний край 3 мм минимум режущей кромки, меру безопасности, чтобы во время обрезки ни один текст не обрезался в случае небольшого смещения бумаги в машинах. Таким образом, вам нужно вычислить и вручную добавить 5-миллиметровые выступы в конечные размеры документа в меню «файл» — «новый» или «изображение» — «размер рабочей области». Импортированные файлы изображений в документе макета должны строго быть в высоком разрешении для более качественного рендеринга.
Создайте новый слой (Shift + Ctrl + N) и нарисуйте инструментом Карандаш (Pencil Tool) точку, размером в 1 пиксел. Для рисования используйте цвет #01bfd2.
Сгладим края этого слоя, используя градиентную маску. Выберите инструмент Градиент Grradient Tool) и создайте градиент, как показано ниже:
Если вы выбираете изображения с низким разрешением, это может напрямую повлиять на качество рендеринга после печати, делая изображение менее точным. С другой стороны, более высокое разрешение бесполезно, потому что глаз уже не способен отличить разницу в точности.
Для меры безопасности важно сгладить и векторизовать
Вам просто нужно дважды щелкнуть нюансы, чтобы просмотреть их параметры и преобразовать их. Точно так же тексты и изображения должны быть векторизованы. Но что это значит? Это просто означает, что текст или изображение состоят из геометрической формы и имени соседних пикселей. Преимущество наличия текстового или векторного изображения — возможность изменять размер без ущерба для качества. Но мы должны оставаться очень внимательными, потому что эти разные шаги являются окончательными и больше не позволяют никаких дополнительных изменений.
Примените новый слой с маской, которую залейте только что созданным градиентом.
Шаг 4. Создаем узор
Теперь создадим простой узор, который добавим к шапке. Инструментом Карандаш (Pencil Tool) размером в 2 пиксела нарисуйте две точки, как показано на рисунке. Отключите на
Поэтому рекомендуется делать копии перед резервным копированием. Затем выберите «сгладить изображение» после нажатия кнопки параметров в правом верхнем углу. По соображениям безопасности рекомендуется копировать блоки вне рабочей поверхности. Эти метки будут напечатаны одновременно с вашим документом, чтобы лучше облегчить его реализацию и формирование.
На вкладке «Общие» вы должны выбрать параметр «оптимальное качество», одновременно снижая «оптимизацию для быстрого просмотра веб-страниц». Затем вы должны нарисовать черные линии с 25 точками после синей маркировки. Но будьте осторожны, линии резки не должны пересекаться друг с другом, рискуя быть видимыми на вашем документе в случае переключения машины на срез.
время видимость фонового слоя (кликните по иконке глаза около фонового слоя) и создайте узор (Редактирование — Определить узор) (Edit > Define Pattern):
Создайте новый слой (Shift + Ctrl + N) и поместите его под слой с подсветкой. Выделите область, к которой Вы хотите применить узор и откройте окно Выполнить заливку (Fill) (Shift + F5). Нажмите ОК.
На вкладке «Общие» выберите «оптимальное качество», сняв флажок «оптимизировать для быстрого просмотра веб-страницы» и сохраните. Реализация моделей — это решающий шаг в создании веб-сайта. Для того, чтобы ваш сайт был приятным, необходимо позаботиться о дизайне графического интерфейса, но прежде всего для того, чтобы ваш сайт был эффективным, необходимо создать интеллектуальный макет, соответствующий вашим целям и содержимому. Реализация моделей должна проходить через несколько этапов, функциональный дизайн в черно-белом графическом дизайне, объединяющий вашу личность и ваши цвета.
После добавления текстуры шапка выглядит так:
Сделайте плавный переход от узора к шапке: к слою с узором добавьте маску и мягкой кистью белого цвета (#ffffff) с непрозрачностью 60% пройдитесь по маске.
В этой статье мы дадим вам все ключи, чтобы преуспеть в этом фундаментальном шаге в любом проекте создания сайта. Независимо от того, являетесь ли вы вашим веб-агентством или самим, какие модели делают, полезно иметь четкие идеи, чтобы понять стадию реализации моделей вашего веб-сайта.
Реализация моделей, ключевой шаг в создании вашего сайта
Макет, каркас, эрголайют, макет или графический интерфейс: о чем мы говорим
Веб-профессионалы, как правило, являются творческими с точки зрения семантики. Существует около десяти разных терминов, чтобы говорить о веб-модели. Если самый популярный во Франции, вероятно, каркас, вы когда-нибудь слышали об эрголайюте или модельном проводе? Это семантическое богатство не должно скрывать существенного, термин «макет» охватывает две реальности, совершенно разные.Результат:
Шаг 5. Добавляем логотип
Переходим к добавлению логотипа. Выберите мягкую кисть с цветом #19535a и нарисуйте пятно.
Напишите текст:
К слою с логотипом добавьте стиль слоя Тень (Drop Shadow).
Функциональная модель
Речь идет о определении в черном в белом макете, организации различных элементов, даже основных текстов. Термин «макет» имеет особенность квалификации шкалы функционального масштаба 1: термин зонирование квалифицирует функциональную модель, состоящую из только блоков, это первый шаг каркаса.
Графическая модель
Контейнер состоит только из блоков, это первый шаг каркаса. Расширяя функциональную модель, графическая модель объединяет цвета и фирменный стиль. Это точное представление веб-страницы, которое затем должно быть интегрировано развитыми, за исключением, возможно, текстов, которые часто остаются ложным текстом.
Шаг 6. Навигация
Добавьте текст для навигации.
Нарисуйте кнопку навигации, используя инструмент (Rectangular Marquee Tool). Залейте выделение любым цветом и уменьшите параметр Заливка
К слою с кнопкой добавьте стиль Наложение градиента (Gradient Overlay).
Шаг 7. Слайдер для контента
Создайте выделение размером 580х295 пикселов.
Залейте выделение любым оттенком серого.
Поместите изображение. Закрепите его со слоем, который создали ранее.
Теперь к слайдеру добавим эффект. Создайте новый слой (Shift + Ctrl + N) , выберите Кисть (Brush Tool) с диаметром 400 пикселов.
Откройте палитру Кисть (F5) и установите те параметры, которые показаны на скриншоте:
Выберите черный цвет (#000000) и нарисуйте пятно:
Для смягчения краев примените фильтр Размытие по Гауссу (Gaussian Blur).
Выделите нижнюю половину тени и удалите (Delete) .
Поместите слой с тенью над слайдером:
Сожмите слой с тенью за средний маркер (Ctrl + T) , а затем снова отцентрируйте слой с тенью: выделите оба слоя и в панели свойств нажмите на кнопку Выравнивание центров по горизонтали (Align Horizontal Centers).
Дублируйте слой с тенью (Ctrl + J) и поместите дубликат на нижний край слайдера.
Нарисуйте кнопки на слайдере, используя инструмент Прямоугольная область выделения (Rectangular Marqee Tool) .
Залейте кнопки черным цветом (#000000).
Уменьшите непрозрачность слоя с кнопками до 50%.
Добавьте фигуру стрелки на кнопки слайдера:
На нижней части слайдера нарисуйте полосу и залейте ее черным цветом (#000000).
Уменьшите непрозрачность слоя с полосой до 50%.
На эту полосу добавьте описание Вашего проекта:
Шаг 8. Добавляем текст с приветствием
Напишите текст с приветствием:
Шаг 9. Завершаем работу над шапкой сайта
Мы почти закончили работу над шапкой сайта. Добавьте еле заметную тень при помощи инструмента Кисть (Brush Tool).
Оставьте между тенью и заголовком пропуск в 1 пиксел.
Создайте новый слой под слоем с шапкой (Shift + Ctrl + N) и примените к нему градиент.
Шаг 10. Добавляем кнопки для слайдера
Нарисуйте кнопки смены слайдов.
К одной кнопке добавьте стиль слоя Внутренняя тень (Inner Shadow), а затем дублируйте слой с кнопкой нужное количество раз (Ctrl + J) .
Шаг 11. Создаем разделитель для контента
Инструментом Карандаш (Pencil Tool) и нарисуйте светло-серую (#aaaaaa) линию шириной в 1 пиксел.
Вообще, стоит сказать, что изучение Фотошопа с нуля может занять у вас несколько месяцев, а может быть и лет, если вы не знаете одного простого секрета. А секрет в том, что в фотошопе есть определенный набор функций, изучив которые вы уже сможете сделать свой первый сайт, даже абсолютно с нуля. И сегодня я о них расскажу и покажу как сделать дизайн сайта в фотошопе пошагово. На самом-то деле, секрет в том, что сайт состоит из фигур, текста и картинок. Дальше вы делаете с этими объектами какие-то манипуляции. В принципе, все базовые вещи необходимые для быстрого старта работы в Фотошопе с нуля, которые мы сегодня и обсудим.
Во-первых, поговорим про настройку фотошопа для веб-дизайна, про простые фигуры, текст, картинки, простые манипуляции с объектами, про разметку, про экспорт, про горячие клавиши и еще несколько фишек (рис.1). Также вы можете записаться на мой видео-курс по веб-дизайну
Рис.1 Быстрый старт в Фотошоп
Дизайн сайта в фотошопе : с нуля за 60 минут!Для начала, это настройка рабочей области. Прежде всего, стоит зайти во вкладку “Window” в верхней панели и отключить все лишнее и включить все нужное. Во-первых — это “Character” — символы, цвета, слои, “Options” — опции и “Tools”- инструменты. Просто поставьте эти галочки, дальше мы чуть подробнее про каждый инструмент поговорим. Просто бывает частая ошибка — очень много всего включено, на рабочей области бардак и совет такой — отключите все лишнее, включите вот только это, действительно необходимые инструменты (рис.2).
Рис.2 Настройка рабочей области
В фотошопе при создании дизайна сайта мы создаем макет (рис.3), где горячая клавиша ⌘N (Command N), вот таким образом я буду обозначать горячую клавишу в презентации — ⌘N на Mac-е, если вы пользуетесь Windows — то это CTRL+N (Control N). То есть вот этот вот “цветочек”- это CTRL на Windows. Стоит установить единицу измерения пиксели, разрешение — 72 пикселя на дюйм, режим цвета (цветовая палитра) — RGB 8 bit.
Рис.3 Настройка макета
Как создать дизайн сайта в фотошопе: фигуры и трансформацияФигуры. Горячая клавиша “U”. Фигуры — это прямоугольник, прямоугольник с округленными углами, эллипс, многоугольник, прямая и фигура произвольной формы (рис.4).
Рис.4 Фигуры
Этот инструмент часто применяется в photoshop при создании дизайна сайта, и находится он на панели инструментов, да, вот он выделен, горячая клавиша “U”. С формами, с фигурами можно производить трансформации, мы сейчас это рассмотрим на примере фигур, то же самое можно делать и с картинками. Горячая клавиша ⌘Т — свободная трансформация (рис.5), т.е. мы двигаем объект, он у нас свободно изменяет свои размеры. Если мы нажимаем тоже ⌘Т и берем за краешек и двигаем с SHIFT-ом (вот такой вот стрелочкой я буду обозначать нажатую клавишу SHIFT), мы видим, что размер, точнее пропорция объекта сохраняется.
Рис.5 Трансформация
У нас был квадрат, он остается квадратом. Прямоугольник с округленными углами (рис.6,7) так ресайтить нельзя, нельзя так трансформировать, потому что радиусы округления, мы видим, что при трансформации они нарушаются.
Рис.6 Прямоугольник с округленными углами (неправильно)
Рис.7 Прямоугольник с округленными углами (правильно)
При дизайне сайта в фотошопе прямоугольник с округленными углами правильно трансформировать по точкам. Это горячая клавиша “А”. Мы выделяем точки и дальше уже начинаем их двигать стрелочками SHIFT-ом. В общем, стоит запомнить, что прямоугольник с округленными углами нельзя просто так взять и трансформировать, его нужно трансформировать по точкам.
Выделение, перемещение. Вообще, для выделения объекта — горячая клавиша “V” для выделения и перемещения она называется move to и есть клавиша “А” для точечного перемещения (рис.8). В предыдущем примере мы видели, когда я выделял точки в прямоугольнике с округленными углами, вот я как раз нажимал эту горячую клавишу “А”, выделял точки и с ним уже дальше работал.
Рис.8 Выделение, перемещение
Копирование. Вот этот значок “⌥” — это на Mac-е “option” , если вы работаете на Windows, то это клавиша Alt (рис.9).
Рис.9 Копирование
Там нажимаете Alt и начинаете перетаскивать объект. Видим, как курсор изменяется, становится два курсорчика, сейчас будет видно, анимация пройдет…вот, я наживаю Alt, начинаю двигать и мы видим, что курсор меняется, если курсор поменялся, значит объект будет копироваться. Для того, чтобы понять как создать дизайн сайта в фотошопе, нужно понять все эти фигуры.
Прозрачность. Клавишами от 1 до 0 мы можем изменять прозрачность объекта, “opacity” , так называемая. Вот я сейчас просто нажимаю сейчас будет 1 — это 10, 2 — 20, 30 и так далее и так до 100, т.е. 0 — это 100% прозрачности (рис.10).
Рис.10 Прозрачность
Дизайн сайта в photoshop : текст, выравнивание и цветТекст. Работа с текстом — горячая клавиша “Т”. Вот так в панели инструментов выглядит сам инструмент работы с текстом — шрифт, размер там и так далее. Вообще есть два варианта работы с текстом в фотошопе при создании дизайна сайта — текстовой блок и текстовая строка. Текстовой блок — это когда мы задаем размер этого блока и текст автоматически в этом блоке переносится, перемещается, заполняет все это пространство. В строку, в бесконечно длинную строку придется вот эти переносы на следующую строку делать вручную, т.е. ставить курсор, нажимать Enter и переносить. В тексте можем просто потянуть и изменить размер и текст сам подстроится под размер блока. Вообще удобнее для параграфов, т.е. для набора использовать текстовой блок. Текстовую строку удобно использовать для (давайте еще раз ее включу) каких-то очень коротких слов — либо одно слово, либо два слова, либо три слова и так далее, т.е. для каких-то коротких вещей. Та же самая горячая клавиша “Т” (рис.11,12).
Рис.11 Текст
Рис.12 Текст
При создании дизайна сайта в photoshop большую роль имеет выравнивание. Если у вас есть несколько объектов хаотичных, мы можем их выделить и выровнять. Сейчас я еще раз покажу, как это делается. Т.е. я выделяю все объекты, нажимаю “выровнять по верхнему краю” и равномерно распределить, беря за размер, за точку отсчета центр изображения. Т.е. по верхнему краю, посередине, по нижнему, то же самое по вертикали и так далее — это чтобы равномерно распределить объекты по, ну то есть равномерно распределить от первого к последнему (рис.13).
Рис.14 Группа слоев
Давайте посмотрим дальше как сделать дизайн сайта самому. Есть несколько эллипсов, несколько объектов, я их выделяю и группирую, они у меня находятся в папочке все. Можно группы в группы заносить, можно создавать папку из нескольких папок и так далее. Горячая клавиша “⌘ G”.
Цвет. Палитра с цветами, стоит установить цветовые координаты Hue, Saturation, Brightness , т.е. тон, насыщенность и яркость в палитре, в инструменте вот эта маленькая кнопочка, маленькая иконочка, нажмите на нее и установите HSB Sliders (рис.15).
Рис.15 Цвет
Вот эти цветовые координаты HSB, просто удобнее с ними обращаться, т.е. в чем здесь прелесть? Вы сначала устанавливаете тон, сначала определяете цвет, который вам нужен, а потом этот цвет подстраиваете по насыщенности и по яркости. С остальными работать гораздо сложнее, потому что там все-таки перемещение цветов идет. Попереключайте, посмотрите, как они работают. В общем, рекомендую установить цветовые координаты — тон, насыщенность и яркость.
Как сделать дизайн сайта в фотошопе: картинки, смарт-объекты и маскиКартинки и смарт-объекты. Что важно сказать про это — смарт-объект не теряет в качестве при изменении размера, растровая картинка превращается в пятно (рис.16,17).
Рис.16 Картинки и смарт-объекты
Рис.17 Картинки и смарт-объекты
О том как сделать дизайн сайта в фотошопе, я расскажу далее. Давайте еще раз. Я просто изменяю размер, смарт-объект, растровая картинка, увеличиваю, видим цветовое пятно. Смарт-объекты не теряют в качестве после уменьшения размера и последующего увеличения, т.е. можно спокойно их трансформировать и ресайдить. Картинки в дизайне сайта автоматически импортируются в Фотошоп как смарт-объекты, т.е. если вы добавляете картинку в Фотошоп, она превращается в смарт-объект. Особенность в том, что смарт-объекты нельзя редактировать. Имею ввиду, кисточкой что-то подтереть, подретушировать смарт-объекты не получится. Нужно либо заходить внутрь смарт-объекта, т.е. двойным кликом, либо просто, самый простой варинт — это кликнуть “растризовать”, кликнуть по изображению правой кнопкой мыши в слоях “Rastrize” и “Convert to smart oject”. Видим, когда “Растр” — это у нас просто изображение, когда “Smart object”, здесь появляется такая маленькая икононочка, надеюсь, вам видно. Нет иконочки, смарт-объект — есть иконочка.
Маски. Alt click между слоями, т.е. мы наживаем Alt и кликаем между слоями(рис.18).
Рис.18 Маски
Рис.19 Маски
И просто поймите сейчас, как это работает, на следующем слайде я покажу в чем суть. Т.е. у нас есть два слоя, есть эллипс, есть картинка. Мы наводим курсор, нажимаем Alt, появляется вот такая вот стрелочка и просто кликаем. Вот как это работает.
Давайте далее рассмотрим дизайн сайта в photoshop по шагам. Опять же эллипс, картинка, давайте я на паузу поставлю, когда мы превращаем эллипс в маску, у нас верхняя картинка заполняет форму этого эллипса. Соответственно, когда вы хотите сделать что-то похожее, внизу у вас должен быть, как бы, родительский объект, тот объект, формы которого вы хотите заимствовать, а сверху уже накладываете картинку, которая будет его перекрывать. Это очень распространено в фотографиях, т.е. как сделать фотографию в круге? Очень просто! Нужно сделать несколько кружочков, наложить на них фотографии и включить маску.
Настройка фотошопа для веб-дизайна : направляющиеНаправляющие. Горячая клавиша “⌘R”, чтобы скрыть и показать линейки (рис.20).
При создании сайта в фотошопе используйте линейку — это черные штучки с цифрами, это они и есть. И горячая клавиша “ ⌘;” , чтобы скрыть и показать направляющие. Т.е. давайте на скриншоте на примере, я открываю линейки и просто перетаскиваю из углов направляющие, опять же направляющие нужны, чтобы ваш макет выглядел ровно, чтобы вы могли по этим направляющим ваши текстовые блоки, картинки и фигуры уметь выровнять. И стоит еще здесь проверить, чтобы единица измерения была “пиксели”. Нужно просто нажать правой кнопкой мыши на линейке и установить пиксели(рис.21). У нас везде все в пикселях должно быть.
Для экспорта мы заходим — “Файл”, “save for web”(сохранить для веб) и сохраняйте ваш макет, если вы делаете сайты, проще всего, самый простой формат, который не требует настроек дополнительных — это “PNG 24” (рис.22).
Рис.22 Экспорт файла
В чем его прелесть? Т.е. в чем минус GPEG-а, все знаем, что картинки принято хранить в GPEG-е. GPEG — ломает шрифты, т.е. если у вас макет сайта, где много шрифтов, много текста, в GPEG-е шрифты будут размываться, шрифты будут, так называемыми артефактами. Если мы сохраняем в PNG 24, то картинка выглядит гораздо чище. Она может занимать чуть больше места, но на первых порах, на первых этапах, чтобы не перегрузить себя какими-то настройками, ставьте PNG 24 и смело сохраняйте ваши макеты в этом формате.
И я напомню про горячие клавиши (рис.23).
Горячие клавиши в photoshop значительно ускорят работу при создании дизайна сайта.
“U” — прямоугольник, эллипс, фигуры.
“Т” — это текст.
“В” — выделение, перемещение объекта.
Клавиша “А” — для точечного выделения, помним про прямоугольник с округленными углами.
Alt с перемещением, т.е. мы копируем объект, зажимаем Alt и начинаем его двигать, он начинает копироваться.
Alt clic между слоями — мы превращаем слои в маску, нижний слой становится маской, верхний слой на него накладывается.
“⌘Т” — трансформация, изменение размера.
“ ⌘G”, “ ⌘ SHIFT G” — группировка, разгруппировка в папки.
“ ⌘R” — скрыть и показать линейки.
“ ⌘;” — скрыть и показать направляющие.
И, думаю, всем известная клавиша “ ⌘Z” — отменить предыдущее действие и если мы зажимаем “Option” или “Alt” на Windows , ALT+Z — мы можем шагать назад по нашей истории изменений, а если мы зажимаем ⌘SHIFT и нажимаем Z, то мы делаем шаг вперед. Т.е. с ALT-ом мы двигаемся назад, с SHIFT-ом мы можем сделать вперед, потом снова назад, вперед. Нажимаем ⌘Z, откатываемся на предыдущее изменение.
Итак, мы рассмотрели дизайн сайта в фотошопе пошагово. И давайте на примере реального макета посмотрим вместе, как это работает.
Читайте также…
7 ошибок веб-дизайна, которых следует избегать в Photoshop
Вы получили хороший проект по веб-дизайну, и теперь настало время решающего вопроса. Пора работать долго, пора много работать и пора доставлять товар. Но прежде чем передать готовый продукт, убедитесь, что вы избежали этих 7 ошибок при создании веб-дизайна в Photoshop.
1. Избегайте дизайна с неровными пикселями (используйте сглаживание для текста)
Сглаживание делает пиксели гладкими и четкими. Не использовать эту базовую функцию Photoshop для ваших текстовых слоев — чистая ересь, и из-за неровностей пикселей ваш дизайн выглядит так, как будто он был создан в 2002 году.Чтобы решить эту проблему, просто войдите в панель «Персонаж» из « Window », затем выберите вариант в зависимости от ваших потребностей. Я считаю, что « Smooth » лучше всего работает в большинстве ситуаций.
Совет . Убедитесь, что для всех текстовых слоев установлен один и тот же стиль сглаживания. Например, не устанавливайте одни на четкость , другие на резкость и несколько на сильная — постоянство c является ключевым моментом.
2. Избегайте беспорядочного рабочего процесса (используйте папки для организации слоев)
Если вы нарушите это фундаментальное правило, вы начнете ненавидеть всех… включая себя.Прежде всего, подумайте о разработчике, которому нужно отсортировать ваши слои, чтобы найти те, которые ему нужны. Затем подумайте, как вы можете повторно использовать некоторые элементы (верхний колонтитул, нижний колонтитул и т. Д.) В другом дизайне. У вас будет большая головная боль при их поиске, так что избавьте себя от хлопот и разложите все по папкам с соответствующими названиями.
Совет . Такие вещи, как состояния наведения курсора и скрытые раскрывающиеся меню, могут иметь цветовую кодировку, чтобы вы не удалили их случайно. Это также помогает разработчику найти их.Для этого просто щелкните правой кнопкой мыши над символом глаза рядом с вашей папкой на панели слоев и выберите один из цветов.
3. Не забывайте о состояниях наведения / опускания (добавьте их в кнопки и меню)
Состояния наведения / опускания — одна из самых недооцененных вещей в веб-дизайне. Поскольку это не то, о чем клиенты активно просят, большинство веб-дизайнеров просто забывают включить их. Это не требует много времени и усилий, но люди просто не обращают на них внимания, потому что пытаются завершить проект как можно скорее.Уделите несколько дополнительных минут и включите эти дополнительные состояния в окончательный .psd-файл. Внимание к деталям может выделить вас среди конкурентов.
Совет . Вы можете быстро создавать состояния наведения / опускания, используя корректирующий слой Яркость / Контрастность.
4. Избегайте больших размеров файлов (растрируйте все смарт-объекты)
Смарт-объекты просто потрясающие, но они также занимают довольно много места. Не удивляйтесь, увидев файлы .psd веб-дизайна размером более 200 МБ, потому что они забиты смарт-объектами.Хотя они могут быть полезны на этапе проектирования, они не особенно полезны никому после того, как клиент уйдет. Конечно, есть исключения, но в большинстве случаев лучше растрировать смарт-объекты. Вы можете легко уменьшить размер файла .psd до 90%!
Совет . Легко идентифицируйте свои смарт-объекты с помощью инструмента « фильтр для смарт-объекта » в верхней части панели слоев (функция доступна в Photoshop CC).
5. Избегайте использования только общих шрифтов (используйте также современные шрифты)
Arial нашел свое место в веб-дизайне, и никто не предлагает вам исключить его из списка.Но с множеством отличных вариантов, таких как Google Webfonts, Adobe Typekit, FontSquirrel и т. Д., Вы были бы дураком, если бы не оживили свою типографскую игру. Кроме того, большинство из них легковесны, бесплатны и могут быть реализованы с помощью всего нескольких строк кода, поэтому их стыдно не использовать.
Совет . Обязательно изучите все веса, которые может предложить семейство шрифтов — их разумное использование обязательно улучшит ваш дизайн.
6. Избегайте скучивания элементов вместе (создавайте больше пробелов)
Причина, по которой я люблю разрабатывать веб-сайты в Photoshop, заключается в том, что у меня есть полный контроль над всем — например, сколько пробелов и передышки я хотел бы оставить между элементами.Даже если у вашего клиента есть странные запросы, например, установка 90% сайта над мертвой складкой, вы все равно полностью контролируете результат. Итак, используйте достаточное пространство между элементами, и это сделает ваш дизайн намного лучше.
Совет . Если конечный дизайн выглядит потрясающе, клиенту нечего будет сказать о складке или чем-либо еще. Но убедитесь, что вы готовы подкрепить свой выбор здравыми объяснениями.
7. Избегайте форм, которые не удобны для пользователя (потребуется время на их разработку)
Формыне так уж интересны, если вы не занимаетесь дизайном пользовательского интерфейса, но для клиентов привлекательная область может означать разницу между потенциальным клиентом и упущенной возможностью.Найдите время, чтобы правильно разработать формы, сверху вниз, и включить подсказки, сообщения об ошибках и успешном выполнении. Это обязательно принесет вам высокие баллы среди ваших клиентов.
Совет . Обязательно используйте Shift при расположении полей, чтобы сохранить одинаковый интервал. Это устанавливает ваши расстояния с шагом 10 пикселей, так что в итоге вы получаете великолепно выглядящие формы.
Какие еще ошибки делают веб-дизайнеры при использовании Photoshop?
Adobe Photoshop для веб-дизайна (Arturo Servín).Онлайн-курс
Этот курс обновляется, чтобы включить в него новые функции Adobe Photoshop и дать вам наиболее полный опыт обучения.
Существует множество инструментов для создания веб-сайтов, но один из них является наиболее полным для этого, и это не что иное, как Adobe Photoshop. В этом курсе из 6 курсов «Основы Domestika» Артуро Сервин — графический дизайнер, специализирующийся на веб-дизайне и сертифицированный инструктор Adobe, — шаг за шагом научит вас, как использовать Photoshop для разработки и макета адаптивных [/ i] адаптивных веб-сайтов в формате простой и незамысловатый способ.
Если имя учителя звучит для вас, это, вероятно, из-за его первого «Основы Доместики: Введение в Adobe XD для мобильных приложений», где вы делитесь своими знаниями по разработке приложений с нуля для iOS и Android.
Вы начнете этот курс, зная основные принципы работы программы: от обучения настройке интерфейса до создания новых документов для создания вашего веб-сайта для различных устройств.
Затем вы научитесь создавать схемы своего веб-сайта с помощью интеллектуальных направляющих и направляющих, которые позволят вам создать сетку для определения макета и структуры всех разделов вашей страницы.
Вы продолжите третий ход с порядком в качестве главного героя. Вы увидите, как слои работают, чтобы все элементы были в порядке, и вы узнаете различные варианты размещения объектов, тем самым оптимизируя работу вашего веб-дизайна.
На четвертый год вы полностью окунетесь в мир экранной типографики. Вы узнаете, какие шрифты являются оптимальными для Интернета, и научитесь редактировать тексты для форматирования и стилизации с помощью инструментов Photoshop.
Затем Артуро расскажет все, что вам нужно знать о отзывчивом .Таким образом, вы будете знать, как оптимизировать формат вашей веб-страницы в зависимости от модели мобильного телефона или планшета, сохраняя при этом свой дизайн и всегда адаптированный к любому устройству.
В последнем курсе вы научитесь генерировать ресурсы для своей страницы, вы увидите форматы для экспорта файла, вы создадите стили CSS, среди других ресурсов, которые направлены на улучшение и улучшение сборки вашего веб-сайта с командой разработчиков.
Технические требования
- ⦁ Компьютер с Windows 10 или macOS 10.12 Sierra (и выше).
⦁ Adobe Photoshop CC (вы можете купить или загрузить 7-дневную пробную версию на сайте Adobe).
⦁ Рекомендуется иметь графический планшет.
10 бесплатных плагинов для веб-дизайна для Adobe Photoshop
Adobe — мировой лидер в области программного обеспечения для дизайна. Они предлагают все, от векторного дизайна до печатной работы, а с выпуском Adobe XD теперь предлагают веб-прототипы.
И хотя эти программы действительно имеют много функций, они также оставляют место для большего.Вот почему я описываю лучшие плагины для всех дизайнеров Adobe CC, которые создают что угодно, от мобильных приложений до макетов веб-сайтов. Независимо от вашего уровня опыта, вы обязательно найдете здесь что-то полезное.
Неограниченные загрузки: более 500 000 надстроек Photoshop, кистей Photoshop и материалов для дизайна
СКАЧАТЬ
Ремесло
Начинает список с InVision Craft, который на сегодняшний день является самым большим плагином в мире. Он доступен для Photoshop и Sketch, которые предлагают одинаковые функции.
Craft больше похожа на библиотеку плагинов, в которой смешано множество различных функций. Вы можете создавать прототипы, автоматизировать фиктивный контент и автоматически синхронизировать ресурсы дизайна с облаком. Все из панели плагинов Craft.
Этот плагин бесплатный и останется бесплатным навсегда. Я настоятельно рекомендую попробовать это и посмотреть, как это улучшит ваш цифровой рабочий процесс.
Fontea
Типографика — огромная часть веб-дизайна, и с помощью Google Web Fonts вы можете пойти намного дальше, чем стандартные системные шрифты.Именно поэтому Fontea была создана: чтобы помочь веб-дизайнерам создавать красивую типографику, не полагаясь на предустановленные семейства шрифтов.
С Fontea вы можете бесплатно выбирать из сотен шрифтов Google. Все они могут быть встроены в ваши веб-сайты, поэтому они идеально подходят для любого проекта. И вы можете быстро переключаться между разными стилями, ничего не загружая.
HTML-блок
Бесплатный плагин HTML Block позволяет писать код и преобразовывать его непосредственно в элементы в Photoshop.Это похоже на обратную сторону плагина экспорта кода, поскольку теперь вы можете импортировать код непосредственно в файлы Photoshop.
Разработчикам особенно понравится этот плагин, поскольку часто бывает проще сначала создавать кнопки, меню и столбцы с помощью CSS. Если вы предпочитаете кодирование инструментам фигур и эффектам слоев Photoshop, то установка этого плагина избавит вас от лишних хлопот.
Панель пера PS
Photoshop не задумывался как инструмент для редактирования векторных изображений. Однако у него есть эти инструменты, и это один из лучших способов разработки векторных элементов для Интернета.
Наибольшее раздражение вызывает переключение между различными инструментами пера и открытие меню настроек для включения / выключения параметра «Snap Vector Tools». Панель PS Pen полностью решает эту проблему.
Это бесплатный плагин, который добавляет новую панель в графический интерфейс. Эта панель предназначена для векторных дизайнеров, которые постоянно создают значки в Photoshop, а не в Illustrator. Это может занять некоторое время, но это ускорит ваш рабочий процесс.
Примечание: этот плагин на 100% бесплатный, но он все еще проходит процесс проверки на сайте.Их система плагинов спроектирована так же, но эту панель для пера можно загрузить бесплатно, так что пусть веб-сайт не сбивает вас с толку!
AI2 Холст
Вы можете многое сделать с элементом холста HTML5 и веб-SVG. Но этот дополнительный шаг по экспорту SVG и кодированию их в элементы холста может занять много времени.
С помощью подключаемого модуля AI2Canvas вы можете легко автоматизировать функцию экспорта Illustrator. Это позволяет создавать векторную графику и автоматически экспортировать ее в код холста HTML5.Вы даже можете добавить функции поворота для создания анимационных эффектов — и все это в Illustrator!
Чтобы узнать больше, посмотрите это демонстрационное видео.
Копио
Если вы хотите скопировать слой в Photoshop, вы всегда можете продублировать его одним нажатием кнопки. Но у вас никогда не было возможности скопировать слой из одного файла и вставить его в другой файл.
С Copio все может измениться. Этот простой бесплатный плагин добавляет полную поддержку копирования / вставки для любых слоев, которые вы хотите переместить в другие файлы PS.
Обычно вам нужно перетаскивать слои, и это может быть утомительно, пытаясь сопоставить курсор с определенной вкладкой файла Photoshop. С помощью этого плагина вы просто выбираете слой и копируете / вставляете его с помощью горячих клавиш Copio. Создавать дизайн в Photoshop стало намного проще.
Нарежь и нарежь меня
УстройстваRetina увеличили время, затрачиваемое на разработку мобильного приложения. Но они также внесли эти требования в адаптивный веб-дизайн, где даже веб-сайтам нужны изображения @ 2x и @ 3x, чтобы они выглядели четкими на каждом экране.
Используя плагин Cut & Slice Me, вы можете автоматизировать процесс экспорта с изображениями правильного размера и с правильными названиями. Вы просто выбираете, какие устройства вам нужно поддерживать, а этот плагин позаботится обо всем остальном.
Композитор
Adobe Photoshop — отличная программа для создания мокапов из-за возможности компоновки слоев. Эти композиции позволяют изменять стили интерфейсов с разными цветами, пользовательскими состояниями и функциями, сохраняя их все в одном документе.
Composer выводит композицию слоев на новый уровень.Этот плагин позволяет обновлять похожие элементы во всех композициях слоев, поэтому вам не нужно просматривать их по отдельности.
Допустим, у вас есть логотип в верхнем левом углу четырех разных композиций слоев. Вы хотите переместить его в центр. Обычно вам нужно было перетащить его по экрану для каждой композиции слоев четыре раза.
В Composer вы выбираете все композиции слоев, перемещаете логотип, и все сразу как дождь.
Генератор длинной тени
Современные тенденции дизайна в сочетании с материальным дизайном действительно подтолкнули к созданию эффекта длинной тени.Он настолько популярен, что у пользователей Photoshop есть плагин Long Shadow Generator, который воссоздает его одним щелчком мыши.
Вы выбираете длину, непрозрачность и направление тени вместе с типом цвета. Затем просто нажмите «Создать», и ваша длинная тень будет применена к любому элементу, который вам нравится.
CSS3P
Я не мог завершить эту статью, не упомянув один инструмент для экспорта кода. CSS3Ps, вероятно, лучший бесплатный вариант с полной поддержкой современных свойств CSS3.
Сначала вы создаете элементы в Photoshop, затем выбираете эти слои и нажимаете кнопку CSS3Ps.
Он автоматически выводит чистый код CSS3 вместе с классами для воссоздания этих элементов на вашей странице. Это работает со всем, от текстовых слоев до кнопок, и даже поддерживает несколько слоев одновременно.
Посмотрите это демонстрационное видео, чтобы увидеть, как работает этот плагин.
Это лишь некоторые из моих любимых плагинов для веб-дизайнеров, но всегда появляются новые, так что ждите новых плагинов Adobe CC на горизонте.
Этот пост может содержать партнерские ссылки. См. Раскрытие партнерских ссылок здесь .
Дизайн 101: Photoshop для веб-дизайна не просто устарел… это плохая практика
Кайл Кристенсен
Кайл — ведущий графический дизайнер Red Branch Media.
# design101
Жил-был день, когда Photoshop был идеальным местом для зарождения всего вашего творчества в веб-дизайне. Да, тот день, когда вы могли конвертировать эти волшебные PSD в HTML.Но тот день давно прошел. Если вы планируете создать веб-сайт с помощью Photoshop, позвольте мне поделиться несколькими причинами, по которым этого не следует делать и почему это просто плохая практика. Не поймите меня неправильно; Photoshop — отличная программа с потрясающими возможностями. Хотя вы все еще можете создавать веб-ресурсы, такие как изображения, вам не следует использовать их для создания веб-страниц. Продолжайте читать, и я могу гарантировать, что вы со мной согласитесь.
День PSD
Создание веб-сайта в Photoshop когда-то было хорошей идеей… в 2003 году.Тогда; он работал хорошо, потому что вы могли точно видеть, как будет выглядеть ваш сайт.
Процесс был простым и эффективным. Вот типичный рабочий процесс, спасибо Treehouse:
- Создайте в Photoshop макет с высокой точностью до пикселя, точно так, как вы хотите, чтобы ваш сайт выглядел.
- Используйте инструмент нарезки, чтобы разделить изображения вашего веб-сайта, а затем экспортировать их в Интернет.
- Напишите HTML и CSS, используя изображения, экспортированные из Photoshop.
Легко, правда? Это работало настолько безупречно, что дизайнер мог создать макет всего веб-сайта, передать его веб-разработчику, а затем разработчик написал код. Всего за несколько шагов ваш сайт будет запущен.
PSD в HTML: почему он устарел
Так почему я не могу просто следовать этому рабочему процессу, описанному выше? Ответ: Интернет быстро меняется. Проблема с PSD в HTML заключается в том, что вы проектируете с фиксированным разрешением. В настоящее время Интернет полностью адаптивен, а это означает, что веб-сайт должен «… реагировать на поведение и среду пользователя в зависимости от размера экрана, платформы и ориентации».»Поскольку среда Photoshop статична, невозможно узнать, как она будет работать и как она будет действовать в Интернете, пока она не будет разработана. В статье блога Smashing Magazine говорится: «Никакие исправления или взломы не приведут к точному совпадению с нашим фотошопом».
Если вы не разрабатываете адаптивный веб-сайт, вы упускаете все преимущества. Ознакомьтесь с инфографикой, опубликованной Шалаиной Окасио: «Будьте мобильны и отзывчивы… Или иди домой!» [Инфографика]
Как использовать Photoshop сейчас
Конечно, вы можете создать веб-сайт в Photoshop на основе общей идеи, но в долгосрочной перспективе это приведет к потере времени только в том случае, если вы сделаете его идеальным по пикселям.Я предлагаю вам, если вы действительно хотите включить Photoshop в свой процесс веб-разработки, вместо этого используйте его как инструмент. Что касается веб-дизайна, вы можете быстро набросать несколько интересных идей за несколько минут, которые вы хотели бы представить своему веб-разработчику, но в конечном итоге они будут теми, кто скажет вам, действительно ли это осуществимая идея или нет. Вы также можете использовать Photoshop для создания ресурсов для веб-сайтов, таких как разработанные изображения, GIF-файлы, реклама и т. Д. Это позволит более эффективно использовать ваше время, так что ваш разработчик может просто вставить ваши элементы в макет.
(Изображение предоставлено: веб-сайт Sketch)
Знакомство с Sketch: преемник Photoshop
Так что, если вы действительно любите веб-дизайн, но ваши навыки веб-разработки и программирования все еще не на должном уровне? Позвольте мне познакомить вас с современным преемником Photoshop, готовым к адаптации; Эскиз. С помощью Sketch вы можете создавать адаптивные веб-сайты для современной эпохи веб-дизайна. Более того, вы можете использовать Sketch для других вещей, например, для разработки интерфейсов или векторной иконографии.Это довольно круто. Еще не убедили? Что, если бы я сказал вам, что вы можете предварительно просмотреть свои проекты в реальном времени прямо на вашем iPhone, iPad или в веб-браузере? Да, Sketch тоже может это сделать.
Даже дизайнер Сара Парментер (@sazzy) показала свою любовь к Sketch: «Я люблю Sketch. Я переключился некоторое время назад и не оглядывался назад. Я был сторонником Photoshop на протяжении всей моей рабочей жизни, пока не появился Sketch, и за неделю я полностью перешел на него ».
В конце концов, хотя веб-дизайн Photoshop ушел в прошлое, вы можете не сомневаться, что есть лучшее решение, которое займет его место.Это решение — Sketch. Не тратьте время на создание веб-сайтов для Photoshop, это принесет вам только неудачи. Вместо этого используйте Photoshop в качестве инструмента для создания веб-ресурсов , таких как изображения, GIF-файлы, реклама и другие элементы для вашего разработчика. Попробуйте Sketch. Это возможность испытать себя и стать лучшим дизайнером, изучив новую программу веб-дизайна. Современная и практичная программа для веб-дизайна. Не упускайте возможность упустить вас!
Кайл Кристенсен
Кайл — ведущий графический дизайнер Red Branch Media.
Кайл возглавляет наш отдел графического дизайна в Red Branch Media. Его способность управлять входящими задачами, сотрудничать с командой дизайнеров, уложиться в сроки и поддерживать нашу систему хранения файлов в порядке, помогли сформировать то, что клиенты сегодня любят в отделе дизайна. Пока он находится вдали от филиала, он проводит время, играя на барабанах, в видеоигры, проверяя последние эмо-, поп-панк и скримо-песни на Spotify, распивая местный напиток омахи и наслаждаясь жизнью с женой. Кайл имеет степень бакалавра искусств со специализацией в области графического дизайна и незначительную степень в области истории искусств от UNO.
20 приемов Photoshop для веб-дизайнеров
Наверное, у каждого веб-дизайнера есть свой набор любимых приемов Photoshop в рукаве. По уважительной причине. Мощные возможности Adobe для редактирования изображений — один из основных элементов мира веб-дизайна. Очень немногие программы могут соперничать с этим отличным программным обеспечением с его широким спектром функций.
Однако, хотя большинство веб-дизайнеров разбираются в Photoshop, всегда есть чему поучиться. Ведь программа не только мощная, но и сложная.Кроме того, новые материалы добавляются через обновления на регулярной основе.
По этой причине рекомендуется продолжить изучение своего любимого инструмента. Чтобы помочь вам в этом, в этой статье мы рассмотрим некоторые из лучших приемов Photoshop. Материалы, которые могут улучшить ваш рабочий процесс, упростить работу и жизнь, сэкономить время и помочь вам создавать лучшие веб-сайты.
Вы готовы узнать больше о Photoshop? Тогда продолжайте читать.
Уловки Photoshop, которые превратят вас в мастера веб-дизайна
Следующие советы варьируются от начального уровня до более сложного материала.Каждый из них выбран, чтобы помочь вам стать лучшим веб-дизайнером, которым вы можете быть.
1. Оптимизируйте свое рабочее пространство
Начнем с основ. Первое, что нужно сделать, чтобы улучшить рабочий процесс, — это настроить Photoshop таким образом, чтобы он поддерживал то, как вы его используете. В конце концов, с более острым инструментом работа становится проще.
По этой причине наша первая остановка — Окно> Рабочая область> Графика и Интернет . Выбор этой опции изменит доступные инструменты на те, которые вы, скорее всего, будете использовать для веб-дизайна.
После этого перейдите к Правка> Настройки . Здесь одна из самых важных остановок — Units & Rulers. Какое бы измерение вы не выбрали здесь (скорее всего, в пикселях), оно будет использоваться по умолчанию для всех последующих документов.
(Быстрая подсказка: чтобы изменить линейки для отдельных документов, просто щелкните их правой кнопкой мыши и выберите желаемую единицу измерения.)
После этого перейдите к Preferences> Performance> History & Cache и нажмите Web / UI Design .
Это приведет к изменению настроек кеша в пользу файлов меньшего размера с большим количеством слоев, с которыми вы в основном будете работать.
Там же можно указать количество состояний истории. Это количество шагов, на которое вы можете вернуться, если хотите что-то отменить.
Наконец, выйдите из настроек, закройте все документы и нажмите кнопку T на клавиатуре. В результате вверху экрана появится меню шрифтов. Все, что вы здесь установили, отныне будет стандартным для новых документов.Потому что никто не любит Myriad Pro так сильно.
2. Изучите сочетания клавиш
Для любой программы, которую вы регулярно используете, изучение сочетаний клавиш является хорошим советом.
Например, я использую Ctrl + Alt + 2/3 для создания заголовков h3 и h4 при написании этого сообщения. Это намного быстрее, чем использовать для этого панель инструментов редактора, поскольку мне не нужно отрывать руки от клавиатуры.
То же самое и с фотошопом. Знать, как выполнять действия с помощью простых нажатий клавиш, бесконечно быстрее, чем щелкать по меню.
В этой статье мы упомянем несколько сочетаний клавиш. Однако я также рекомендую эту шпаргалку для изучения быстрых клавиш для наиболее распространенных операций Photoshop. Кроме того, неплохо было бы взять за привычку проверять сочетания клавиш для того, что вы делаете, снова и снова.
3. Слои группы и имени
При работе с Photoshop вы будете работать с множеством слоев. Большинство элементов не только получают свой собственный слой, но и такие модификации, как яркость / контраст, также добавляются как слои.
По этой причине он может очень быстро запутаться. К счастью, есть множество опций, позволяющих сделать это не так, две из которых — это возможность группировать слои и присваивать им имена.
Во-первых, двойным щелчком по любому слою вы можете изменить его имя на любое другое.
Таким образом, вы легко поймете, содержит ли слой фоновое изображение, меню или боковую панель.
Кроме того, вы также можете выбрать несколько слоев одновременно, удерживая Ctrl , чтобы выбрать отдельные слои, или Shift , чтобы отметить диапазон соседних слоев. Ctrl + G затем превращает их в группу.
Также можно щелкнуть слои правой кнопкой мыши и выбрать оттуда параметр группировки. В любом случае ваши слои станут более организованными. Кроме того, вы также можете давать названия сгруппированным слоям!
4. Слои фильтров
Именование и группировка слоев — хорошее начало. Однако при работе с десятками или даже сотнями из них все равно легко запутаться.
В этих случаях у вас также есть возможность фильтровать слои. Для этого просто используйте меню в верхней части меню Layers для фильтрации по типу, имени, эффекту, цвету и т. Д.
В качестве альтернативы можно напрямую выбрать слой с помощью инструмента Move , удерживая Ctrl и щелкнув слой или объект.
5. Создайте сетку
Изображение предоставлено PureSolution / shutterstock.com.
Сетка — один из важнейших принципов веб-дизайна. Он наводит порядок в дизайне и помогает размещать объекты. По этой причине имеет смысл создавать сетку только в Photoshop.
Для этого используйте View> New Guide Layout .Также можно создать горизонтальные и вертикальные направляющие, просто щелкнув линейку и перетащив ее в документ. Используйте Ctrl для перемещения существующих направляющих.
6. Импорт образцов цвета
Образцы цветов можно загружать непосредственно в Photoshop из файлов HTML, CSS или SVG. Таким образом, у вас есть отличная отправная точка для вашей цветовой схемы при работе с существующими активами, такими как логотип.
Чтобы воспользоваться этим трюком Photoshop, просто откройте панель Swatches , щелкните раскрывающееся меню в верхнем правом углу и выберите Load Swatches .Теперь перейдите к нужному файлу и откройте его, чтобы импортировать новый образец цвета.
7. Сохранение пользовательских форм
Особенно при разработке нескольких страниц для одного и того же сайта или веб-сайтов с похожим дизайном, вы обнаружите, что снова и снова используете одни и те же объекты и формы. По этой причине имеет смысл сохранить их как пользовательские формы для быстрого повторного использования.
Для этого щелкните правой кнопкой мыши нужную фигуру с помощью инструмента выделения контура (черная стрелка). Затем выберите Определить произвольную форму .Как только вы это сделаете, вы можете получить доступ к этой форме через параметры верхней панели инструмента Custom Shape . Просто щелкните раскрывающееся меню с надписью Shape: и выберите сохраненную форму.
8. Переключение между цветами фона и переднего плана
Два переключаются между цветом фона и переднего плана, не нажимая на значок, просто нажмите X на клавиатуре. Кроме того, если вы хотите, чтобы цвета вернулись к простому черно-белому, вы можете сделать это, нажав D .
9. Изменение прозрачности с помощью клавиатуры
Еще одно сочетание клавиш. Для любого инструмента, который может изменять прозрачность, вы можете просто сделать это с помощью клавиатуры. Цифры от 1 до 0 устанавливают непрозрачность от 10% до 100%. То же самое работает и с непрозрачностью слоев.
10. Нарисуйте прямые линии
Чтобы нарисовать прямую линию любым инструментом, просто нажмите и удерживайте клавишу Shift . После этого вы можете нарисовать линию (как по горизонтали, так и по вертикали), которая автоматически станет прямой, как гвоздь.Или щелкните две разные точки, чтобы создать прямую линию между ними.
11. Образец цвета
Следующим в нашей коллекции трюков Photoshop является возможность пробовать любой цвет. Если вам нужен цвет любого объекта, удерживайте кнопку Alt и щелкните нужный оттенок. Это работает как с кистью , , карандашом , , ведром с краской , так и с любыми другими инструментами, использующими цвета.
12. Добавить или удалить из выделенного
Вы можете добавить к существующему выбору, удерживая Shift и выбрав часть, которую хотите включить.Чтобы вычесть, сделайте то же самое, но с кнопкой Alt .
13. Отменить более одного шага
Классический способ отменить последнее действие — использовать Ctrl + Z . Однако это работает только в том случае, если вы делали последнее. Чтобы вернуться на несколько шагов назад, используйте Ctrl + Alt + Z .
14. Динамическое изменение размера кисти
Чтобы изменить размер кисти, не нужно щелкать раскрывающееся меню и перетаскивать его до нужного размера. Вместо этого просто удерживайте Alt и правую кнопку мыши, а затем перетаскивайте влево и вправо, чтобы уменьшить или увеличить размер кисти.
15. Сохранить для Интернета
Использование Safe for Web Функция очень важна, так как она обеспечивает минимальный размер изображения. Это очень важно для повышения скорости работы сайта.
В Photoshop это можно сделать через Файл> Экспорт> Сохранить для Интернета . Однако более быстрый способ — использовать Ctrl + Alt + Shift + S . Добро пожаловать!
16. Открытие изображений как слоев
Иногда бывает необходимо импортировать в Photoshop сразу большое количество изображений.Тем не менее, когда вы просто перетаскиваете их на свое рабочее место, вам будет предложено разместить их вручную.
Более практичный способ сделать это — Файл> Сценарии> Загрузить файлы в стек . Найдите нужные изображения, отметьте их и дважды нажмите Ok . Теперь каждое изображение будет автоматически импортировано в отдельный слой.
17. Скопируйте CSS прямо из Photoshop
Один из самых удобных приемов Photoshop для веб-дизайнеров заключается в том, что программа создает CSS, который можно экспортировать.Нет необходимости набирать все это вручную или использовать метод проб и ошибок для реализации.
Чтобы воспользоваться этим, просто щелкните слой правой кнопкой мыши и выберите Копировать CSS . Или используйте меню Layer , чтобы найти тот же вариант. Теперь у вас есть все необходимые стили, которые можно просто вставить в таблицу стилей или в любую другую программу, которую вы используете.
18. Дизайн для нескольких устройств и ориентации одновременно
Дизайн для Интернета в настоящее время означает проектирование для множества различных устройств.Во времена, когда мобильные устройства вытесняют настольные компьютеры во всем мире, внедрение мобильного дизайна является обязательным.
Источник: ComScore
К счастью, в Photoshop есть артборды и смарт-объекты, которые позволяют очень легко масштабировать дизайн для разных форматов.
Я мог бы подробно описать оба здесь, однако Phlearn сделал отличный учебник по этому поводу, который работает намного лучше, чем я когда-либо мог:
19. Используйте автоматическую обработку повторяющихся задач
Еще одна замечательная функция Photoshop — автоматическая обработка.Это означает, что вы можете повторять записанные задачи снова и снова, не выполняя их вручную. Это очень полезно, например, если вам нужно сохранить много изображений для Интернета.
Вот как это работает. Сначала откройте свой файл. Затем откройте Действия ( Alt + F9 ), найдите Создать новое действие и щелкните его. Введите имя и, при желании, назначьте ему комбинацию клавиш и цвет.
Чтобы записать свои действия, нажмите Запись . Затем выполните операцию, которую хотите повторить.В моем случае я открываю изображение из одной папки и сохраняю его для Интернета в другой папке.
По завершении остановите запись. Теперь вы можете повторно использовать это действие для всех остальных изображений, сэкономив кучу времени. Дополнительные сведения о том, что можно автоматизировать в Photoshop, можно найти в этой статье.
20. Предварительный просмотр на устройстве
Наконец, наряду с Photoshop, Adobe также предлагает приложение, которое позволяет просматривать вашу работу на нескольких устройствах iOS. Лучшее: вы можете наблюдать за изменениями на устройстве, как вы делаете их на компьютере.
Для этого установите приложение и используйте Device Preview для подключения Photoshop к внешнему устройству через USB или Wi-Fi. Вы найдете опцию в Window> Device Preview .
Какие ваши любимые уловки в Photoshop?
Photoshop — один из наиболее часто используемых инструментов веб-дизайна. Его мощные функции делают его идеальным для разработки высококачественных веб-сайтов и ресурсов.
Однако большая мощность сопряжена с большими сложностями, и особенно для новичков, освоение программного обеспечения может занять некоторое время.
Чтобы сократить время обучения, выше мы предоставили ряд полезных приемов Photoshop для веб-дизайнеров. Они упрощают многие вещи — от общего рабочего процесса до автоматической обработки файлов.
Знание Photoshop от и до — отличное вложение в вашу прибыль. Когда вы можете делать что-то быстрее, вы можете взять на себя больше работы и, таким образом, получить больше дохода. И это никогда не может быть плохим.
Какие уловки в Photoshop вам нравятся больше всего? Пожалуйста, дайте нам знать в разделе комментариев ниже, чтобы мы все могли помочь друг другу.
Миниатюра статьи Изображение предоставлено Creative Stall / shutterstock.com
Что лучше: Sketch или Photoshop для веб-дизайна?
Многие агентства задаются вопросом, должен ли Sketch или Photoshop быть их основным инструментом веб-дизайна. Photoshop был отраслевым стандартом, но Sketch и другие инструменты UI / UX бросают вызов старому динозавру. Как компания, занимающаяся разработкой Sketch для WordPress и PSD для WordPress, мы можем испытать противостояние из первых рядов.
Photoshop по своей сути является именно тем, чем он является, — инструментом для редактирования фотографий. Так что появление других вариантов, учитывающих конкретные потребности веб-дизайнеров, было лишь вопросом времени.
Несколько лет назадSketch вызывал много шума как один из первых претендентов. Но вскоре Adobe выступила против своей собственной платформы XD, и InVision теперь также в игре, поскольку они добавили InVision Studio в свое портфолио.
Тем не менее, несмотря на наличие на рынке всего этого программного обеспечения для веб-дизайна, около половины агентств, с которыми мы работаем, по-прежнему предпочитают Photoshop.Почему это так и почему одни переходят, а другие — нет?
«Около половины агентств, с которыми мы работаем , по-прежнему предпочитают Photoshop ».
В этой статье мы рассмотрим основные преимущества использования Sketch для разработки веб-сайтов как с точки зрения дизайнера, так и с точки зрения разработчика.
Что нравится цифровым агентствам в Sketch
Когда цифровые агентства создают веб-дизайн, важно иметь инструменты дизайна, которые:
- Повышение эффективности в процессе проектирования
- Обеспечивает простую организацию шаблонов и представлений
- Упростите демонстрацию прототипов и получение отзывов
- Упростите передачу дел разработчикам
- Позвольте дизайнерам проявить творческий подход
1.Лучшая эффективность
Наиболее часто упоминаемым фактором принятия решения при выборе использования Sketch вместо Photoshop является эффективность. Только в Sketch есть инструменты, созданные специально для веб-дизайна, поэтому панели инструментов позволяют легко получить доступ к наиболее часто используемым для этой конкретной задачи.
Независимо от того, используете ли вы Sketch или Photoshop, можно работать со смарт-объектами и стилями абзацев. Но в Sketch и других инструментах UI / UX повторяющиеся элементы проще в использовании и поэтому, вероятно, будут использоваться для большего эффекта.
Инструменты веб-дизайнаимеют возможность использовать стили также для объектов, чтобы установить штрихи, заливки и тени в качестве глобальных настроек. Вы можете изменить шаблон, и изменения распространятся на все экземпляры на сайте. Если вы используете расширения для совместного использования библиотек со своими коллегами, изменения могут обновляться во всех связанных с ними документах.
2. Организация шаблонов
Sketch использует монтажные области так же, как Adobe Illustrator, где вы можете размещать объект на них и вокруг них и легко создавать несколько монтажных областей в одном и том же виде.Но потрясающая особенность с точки зрения сохранения организованности в Sketch заключается в том, что вы можете настроить весь свой сайт в одном файле, не замедляя работу компьютера.
С Photoshop вы почти гарантированно будете работать с отдельными файлами для каждого разрабатываемого шаблона страницы и для каждого адаптивного представления. В Sketch у вас есть возможность работать с вкладками (называемыми страницами) в документе, на каждой из которых может быть несколько монтажных областей. Это удобно, если вы хотите сгруппировать монтажные области для разных адаптивных макетов определенной страницы в одном и том же представлении.
3. Демонстрация прототипов
Простота экспорта дизайнов в различные форматы и использование расширений для предварительного просмотра дизайнов в браузере также очень ценится в Sketch.
Источник: invisionapp.com/craft
При этом Craft, одно из популярных расширений для переноса эскизов эскизов в InVision, также доступно как расширение для Photoshop. В более поздних версиях Sketch есть встроенная функция предварительного просмотра в браузере, где вы можете показывать свои прототипы.Но пока интерактивность этих прототипов более ограничена, чем в InVision, поэтому опыт переходов между страницами и анимации меньше похож на реальный.
«Одно из популярных расширений для переноса эскизов эскизов в InVision также доступно как расширение для Photoshop ».
4. Упростите переход к разработке
Каждый раз, когда Sketch хвалят за то, что он позволяет легко передать его разработчикам, это происходит благодаря использованию других инструментов, с которыми Sketch интегрируется.Наиболее распространенным является Zeplin, где разработчик может легко получить доступ к CSS различных элементов и увидеть их расположение на странице с помощью простого наведения.
Я спросил одного из руководителей нашей группы разработчиков о том, как наши собственные разработчики WordPress воспринимают работу со Sketch по сравнению с Photoshop. Ответ меня немного удивил, потому что для нас он в основном такой же.
Наши разработчики работают на ПК, поэтому сам Sketch для них недоступен. Поэтому, когда мы работаем с файлами Sketch, нам нужно импортировать дизайны в другой инструмент.Обычно это Avocode, который работает почти так же, как Zeplin.
Avocode — еще один отличный инструмент для передачи ваших дизайнерских файлов разработчикам. Источник: avocode.com
Между прочим, когда мы работаем с файлами Photoshop, у нас есть доступ к тем же функциям, но с использованием расширения, разработанного командой разработчиков Avocode. Таким образом, процесс такой же, мы просто используем разные версии одного и того же инструмента для выполнения работы.
5. Разрешить творчество
Учитывая все эти причины перехода на Sketch, почему некоторые агентства продолжают использовать Photoshop? Одна из причин может заключаться в том, что Photoshop предлагает более мощные инструменты для создания пользовательских графических элементов.Некоторые проекты просто сложнее создать в инструментах, ориентированных на Sketch и UI / UX. Однако с дизайном в стиле Apple, который стал большой тенденцией в последние годы, новых инструментов более чем достаточно.
Можно также предположить, что новые инструменты усиливают эту тенденцию, поскольку ограничения производственных технологий могут влиять на форму физических продуктов.
Что лучше: Sketch или Photoshop?
У большинства дизайнеров есть любимые инструменты, с которыми они наиболее опытны.Переход на Sketch кажется довольно простым делом, но все же важно оставаться в инструментах, в которых вы являетесь экспертом. Все функции Photoshop определенно не будут доступны в новых инструментах, но вы, вероятно, найдете другие, без которых вы не сможете жить, как только вы к ним привыкнете.
Если ваши дизайнеры эффективно используют Photoshop, вы можете организовать свой рабочий процесс так же эффективно, как и с новым программным обеспечением, при условии, что вы используете правильные расширения. Если вы планируете нанять новых дизайнеров или если у ваших нынешних дизайнеров нет сильных предпочтений, выбор между Sketch или Photoshop, скорее всего, упадет на первого.Повышение эффективности и рабочего процесса с помощью программного обеспечения, специально созданного для веб-дизайна, даст вам преимущество на конкурентном рынке, таком как рынок цифровых агентств.
Мы работаем исключительно с профессиональными агентствами, и на момент написания у нас примерно следующее распределение типов файлов, которые мы получаем:
- 50% Photoshop
- 25% Эскиз
- 15% Adobe XD
- 10% Другое, например Illustrator, Figma или InDesign
Тем не менее, я поговорил с двумя агентствами, которые в этом году перешли на Sketch, и это еще не все.Будет интересно проследить, как различные инструменты UI / UX выступают в конкурентной борьбе друг с другом.
Агентства, с которыми я говорю, кажется, не определились с выбором программного обеспечения в ближайшие годы. Крупные из них, такие как Sketch, Adobe XD и InVision Studio, являются претендентами, так что это в основном вопрос не использования Sketch или Photoshop, а скорее вопрос о том, следует ли вам отказаться от Photoshop в пользу программного обеспечения, адаптированного для дизайна UI / UX.
Поскольку анимация становится все более важной отличительной чертой веб-дизайна, инструменты, которые помогают дизайнерам и разработчикам создавать и создавать их, могут взять верх.
И, наконец, я хотел бы добавить к этому постороннего. Figma — это новый инструмент веб-дизайна, который, похоже, быстро растет, и крупные имена технологических гигантов делают ставки на команду, стоящую за ним. 14 февраля 2019 года Figma объявила, что они получили финансирование в размере 40 миллионов долларов во главе с Sequoia Capital, в том числе при поддержке генерального директора LinkedIn и соучредителя Instagram. Я уверен, что об этом еще не все.
Вам нужно больше разработчиков, чтобы воплотить в жизнь все ваши веб-дизайны? Запишитесь на звонок сегодня.
введение для веб-разработчиков
Введение
Часто, работая веб-разработчиком, нам необходимо интегрировать шаблоны. Они могут быть из Photoshop или другого программного обеспечения. В этой статье мы рассмотрим основы Photoshop для веб-разработчиков.
Этот контент изначально был написан для семинара для DAMDigital London.
Adobe Photoshop — это программа для редактирования растровой графики, то есть программа, позволяющая пользователям создавать и редактировать изображения.
Источник изображенияОн был выпущен в 1988 году и стал отраслевым стандартом для графического программного обеспечения.
Вы можете скачать бесплатную пробную версию Photoshop на сайте Adobe.
Рабочее пространство
Рабочее пространство Photoshop является модульным, поэтому вы можете адаптировать его в зависимости от выполняемой работы. Некоторые рабочие пространства по умолчанию уже настроены в Photoshop. В этой статье я использую Graphic и Web . Чтобы перейти в это рабочее пространство, перейдите в Window / workspace / Graphic и Web .
Давайте взглянем на наше рабочее пространство:
Photoshop- A — Строка меню : Здесь вы найдете большинство опций Photoshop.
- B — Панель параметров : Эта панель предоставит вам все параметры для текущего выбранного инструмента.
- C — Панель инструментов : Эта панель содержит все доступные инструменты из фотошопа. Связанные инструменты сгруппированы вместе, и вы можете долго щелкать по одному из них, чтобы увидеть все инструменты.
- D — Панели : это область, где у вас открыты ваши основные панели, такие как
Layers,Historyи т. Д.Чтобы открыть панель, просто войдите в окно/ (Панель, которую вы хотите открыть)
Создайте новый файл
При создании нового файла в Photoshop вам сначала нужно знать, на каком носителе будет дизайн. будет использоваться — то есть будет ли он использоваться для экрана (веб, фильм или видео) или для печати?
В зависимости от ответа на этот вопрос вам потребуется изменить значение PPI (пикселей на дюйм).
Пикселей на дюйм (PPI) — это измерение, используемое для определения разрешения дисплея компьютера.Этот показатель оценивает качество изображения / изображения, которое может отображать конкретное вычислительное или выходное устройство отображения. Пикселей на дюйм также называют плотностью пикселей. Techopedia
Для печати обычно требуется 300 пикселей на дюйм, но на самом деле это зависит от принтера и размера печатаемого документа. Вы также должны изменить свой цвет на CMYK, но опять же, это зависит от того, как вы печатаете документ. Если вы хотите узнать больше о цветах RGB и CMYK, ознакомьтесь с этой статьей.
Для экранов и Интернета? Вам потребуется цвет 72PPI и RGB.Затем вам нужно указать размер вашего экрана. Я бы порекомендовал разрабатывать сначала для мобильных устройств, а затем для планшетов и компьютеров.
Как веб-разработчик, вам может не понадобиться создавать новый файл. Скорее всего, вам нужно будет работать с дизайном, предоставленным веб-дизайнерами.
Теперь мы рассмотрим существующий шаблон .psd и поработаем с ним, чтобы ознакомиться с Photoshop.
Вы можете загрузить и открыть этот PSD-шаблон от Луиса Коста.
Слои
Одной из основных функций Photoshop является слоев .Слои похожи на стопку листов, и вы можете видеть сквозь прозрачные области или области с низкой непрозрачностью (частично прозрачные).
Вы можете открыть панель слоев в Window / Layers .
Верхний слой на этой панели будет помещен поверх всех остальных нижележащих слоев. Слои также могут быть организованы в папки. Важно правильно называть слои и папки. Это поможет при интеграции.
Рядом с каждой папкой и слоем есть значок глаза. Это позволяет вам переключать их видимость.
Ваш PSD может содержать много слоев и документов. Один из способов быстро найти слой — выбрать инструмент перемещения (v) . Щелкните правой кнопкой мыши на холсте, где вы хотите найти свой слой. Вы получите все слои в той области, где вы щелкнули правой кнопкой мыши. Щелкнув по одному из них, он выберет этот слой на вашей панели слоев.
Toolbox
Photoshop поставляется с множеством инструментов. Я покажу вам несколько полезных, которые вам помогут?
Во-первых, если вы просто установите Photoshop CC 2018, вам нужно будет восстановить все инструменты.Итак, перейдите в Edit> Tool bar и нажмите кнопку Restore Defaults.
Мы собираемся увидеть некоторые из наиболее полезных инструментов, которые вы могли бы использовать для интеграции шаблона:
A — Инструменты выделения
- Move : позволяет пользователю перемещать слой по холсту . Как мы видели ранее, его также можно использовать для поиска слоя, если щелкнуть правой кнопкой мыши на холсте.
- Прямоугольная область : этот инструмент используется для выбора области холста для копирования и вставки, заполнения и т. Д.Его также можно использовать для измерения. Когда ваш выбор сделан, вы можете найти размер выбранной области в
Window / Info. Возможно, вам потребуется изменить единицу измерения по умолчанию в PhotoshopEdit / preferences / general / Unit & Rulers, а затем установить единицы измерения в пиксели.
B — Инструменты кадрирования и нарезки
- Кадрирование : этот инструмент может… обрезать изображение?. В настройках инструмента (Панель параметров) вы можете установить соотношение сторон, которое хотите сохранить.
C — Измерительные инструменты
- Пипетка : Пипетка позволяет быстро получить эталон цвета в вашем дизайне.Просто щелкните там, где хотите цвет. Затем в нижней части панели инструментов цвет переднего плана изменится на выбранный. Если вы щелкните цвет переднего плана, откроется окно выбора цвета
- Образец цвета : при интеграции дизайна вам может потребоваться выбрать несколько цветов. Мы собираемся снова использовать информационное окно
Window / Info. Этот инструмент позволяет нам создать образец цвета. Просто нажмите на область изображения, из которой вы хотите получить цвета.Вы получите каждый цвет на информационной панели. Вы можете изменить тип цвета на Интернет, щелкнув значок «Пипетка» под номером.
- Линейка : помогает измерить размер вашего шаблона. Вся информация появится в вашем информационном окне. Сохраняйте
Shiftпри измерении, чтобы ваша линейка оставалась ровной. Вы также можете получить углы.
G — Инструмент навигации
- Рука : Этот инструмент помогает перемещаться по холсту. Вы можете получить доступ к этому инструменту в любое время, удерживая пробел и перетаскивая его мышью.
- Zoom : Позволяет увеличивать и уменьшать масштаб (вы также можете
Ctrl++илиCtrl+-).
Направляющие
Как вы могли заметить при открытии нашего PSD-файла, в нашем шаблоне есть несколько зеленых линий. Они проводники. По сути, они помощники, которые помогут вам построить или измерить объекты на холсте.
Вы можете перемещать существующие направляющие с помощью инструмента перемещения (v).
Для создания новых направляющих вам необходимо открыть линейку: View / Ruler или Ctrl + R .Линейка появится в вашем рабочем пространстве. Затем с линейки вы можете перетащить новую направляющую на свой холст.
Чтобы удалить направляющую, используйте инструмент перемещения (v) и вставьте направляющую обратно в линейку.
Чтобы скрыть и показать все свои направляющие, вы можете просто использовать Ctrl + H или перейти к View / Extras .
Смарт-объекты
Что такое смарт-объекты?
Смарт-объекты — это слои, которые содержат данные изображения из растровых или векторных изображений, таких как файлы Photoshop или Illustrator.Смарт-объекты сохраняют исходное содержимое изображения со всеми его исходными характеристиками, что позволяет выполнять неразрушающее редактирование слоя. Adobe
Смарт-объекты можно распознать на ваших слоях, если на их эскизах есть следующий значок:
Смарт-объекты действительно удобны, если вы работаете с изображениями векторного типа (SVG, EPS, AI), но они также полезны с другие сложные растровые файлы.
Давайте попробуем импортировать смарт-объект в наш PSD. Загрузите файл SVG с сайта flaticon.Чтобы импортировать наш SVG на холст, просто перетащите файл на холст. Теперь мы можем редактировать наш SVG в иллюстраторе или любом другом векторном программном обеспечении, дважды щелкнув миниатюру или наш смарт-объект. Изменения появятся в нашем PSD.
Смарт-объекты могут гораздо больше. Если вы хотите узнать о них больше, ознакомьтесь с разделом «10 вещей, которые вам нужно знать о смарт-объектах в Photoshop».
Экспорт ресурсов
Во-первых, просто напомню, что Photoshop — это программа raster , а не программа vector .Это означает, что мы «не можем» экспортировать файлы SVG из Photoshop. Для этого вам нужно будет экспортировать такие файлы, например, из Illustrator или Inkscape.
В сети мы хотим иметь файлы светлых изображений. Для фотографии мы будем использовать сжатый файл .jpg . Если вам нужно использовать прозрачность (альфа-канал), мы будем использовать файл .png . Для анимированного изображения мы будем использовать .gif . Если вам нужно векторное изображение (например, значки), лучше всего экспортировать файл как .svg . Если вы хотите получить дополнительную информацию обо всех файлах, доступных в Photoshop, вы можете проверить «форматы файлов» на веб-сайте Adobe.
Экспорт нашего холста
Чтобы экспортировать холст, просто выполните следующие действия:
- Перейдите в
Файл / Экспорт / Сохранить для Интернета - Выберите формат файла
- Выберите размер изображения
- Выберите качество
- Сохранить
Экспортируйте только актив с холста
Возможно, вам потребуется экспортировать некоторые активы вашего шаблона.
Давайте экспортируем стрелку влево в карусели продуктов:
Используя инструмент перемещения, мы найдем наш слой. Щелкните правой кнопкой мыши по стрелке и выберите слой Стрелка влево . Теперь просто щелкните правой кнопкой мыши по этому слою на панели слоев. Выберите экспорт как и выберите нужный тип файла.
Мы также можем экспортировать папки.
Действия
Что такое действие в Photoshop?
Действие — это серия задач, которые вы воспроизводите над отдельным файлом или пакетом файлов — команды меню, параметры панели, действия инструментов и т. Д.Например, вы можете создать действие, которое изменяет размер изображения, применяет эффект к изображению, а затем сохраняет файл в желаемом формате. Adobe
Эта функция действительно удобна, если вы хотите изменить размер пакета изображений для Интернета!
Давайте создадим новое действие, чтобы обрезать изображение и экспортировать это:
- Загрузите несколько изображений с https://unsplash.com/
- Откройте одно из этих изображений
- Откройте панель действий
Окно / Действия, - Создайте новое действие, щелкнув значок Создайте новое действие (тот, который находится слева от значка корзины).Назовем это действие Export for web — имя клиента.
- Сейчас мы записываем нашу акцию. Кнопка записи будет красной, и вы можете остановить запись, щелкнув значок остановки (квадратный значок слева) /
- Выберите значок кадрирования, установите соотношение 1х1 и кадрируйте изображение /
- Теперь мы хотим экспортировать наше изображение,
File / Export / Save for Web, выберитеJPG, качество 50% и ширину 500 пикселей. - Нажмите «Сохранить» и выберите папку назначения.
- Закройте изображение, не сохраняя его.
- Чтобы остановить запись, щелкните значок остановки (квадратный значок слева).
Теперь у нас есть действие, поэтому мы можем открыть изображение и просто «воспроизвести» наше действие, нажав кнопку воспроизведения.