Как нарисовать сайт в фотошопе: Разработка макета веб-сайта и веб-графики в Adobe Illustrator

23.05.2021 alexxlab

Содержание

Figma VS Photoshop: что лучше для работы веб-дизайнера?

Несмотря на то, что в распоряжении веб-дизайнеров есть как минимум 5 важных инструментов (Sketch, Illustrator, Adobe XD, Presentator, WebFlow, другое), постоянные споры крутятся последнее время крутятся только возле двух — Photoshop и Figma. Кто-то считает Фотошоп основой основ и тем, без чего дизайнеру не обойтись. Другим достаточно знать Фигму для качественного выполнения работы. Но кто же из них прав?

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

В чем плюсы программы Photoshop?

Идеальна для работы с растровой графики

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

Позволяет создавать сложные, креативные макеты

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

Более привычная и для заказчиков, и для разработчиков

Согласитесь, что чаще всего вас просят прислать макет в формате *.psd? Потому что Фотошоп для большинства людей, отдаленных от веб-дизайна — это что-то привычное, понятное и точно работающее. А вот находить разработчиков, которые верстают сайты не из макетов в *.psd, сложнее.

В чем минусы Photoshop?

Сложность в изучение

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

Неудобно работать с векторной графикой

Конечно, в Photoshop можно отрисовать иконки, геометрические фигуры, формы, кнопки и другие подобные элементы.

Но сделать это сложнее и дольше, чем в аналогичных программах. С другой стороны, такие детали можно создать с помощью другого инструмента, а потом загрузить в Фотошоп и завершить макет там.

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

Действительно, нормально работать в Photoshop на старом ноутбуке вряд ли выйдет. Он занимает много оперативной памяти, из-за чего ПК может сильно тормозить и виснуть. Но, с другой стороны, это отличный повод задуматься о смене техники. Чем не мотивация работать лучше и стараться повысить свой доход?

В чем плюсы программы Figma?

Есть возможность работать над макетом коллективно

Удобно, если вы работаете над макетом с другим дизайнером. Устроена эта функция почти так же, как и в Google Диск — все пользователи-редакторы подписаны, у них разные цвета курсоров. А если нужно что-то уточнить друг у друга, это реально сделать прямо в Фигме, без мессенджеров, с помощью комментариев.

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

Можно обойтись без установки на ПК

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

Функция «Компоненты»

Это одно из главных преимуществ Figma перед Photoshop. В чем суть? В том, что если нужно изменить какие-то повторяющиеся элементы, то не нужно редактировать каждый. Например, вы сделали какой-то значок, который будет на каждой странице макета и вдруг вам надо изменить в нем цвет. В Фигме достаточно подключить функцию «Компоненты», соответственно, первый элемент назначить компонентом и уже от него создавать копии. И тогда, когда вы захотите что-то изменить, достаточно внести правки в этот первый значок, и остальные изменятся автоматически.

Согласитесь, что это удобно?

Конечно, в Photoshop тоже есть подобная функция — «Смарт-объекты», но имеет меньше свойств, из-за чего является не такой удобной, чем тот же инструмент в Фигме.

Удобно работать с векторной графикой

Иконки, мелкие детали, геометрические фигуры, отрисованные в Figma, будут качественнее, чем в Фотошопе. Никакой пикселизации и порчи качества картинки при приближении.

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

В чем минусы Figma?

Без версии на ПК и без интернета нельзя ничего делать

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

Подходит только для сайтов с простым дизайном

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

Если вас интересует наше мнение, то мы считаем, что обе программы важны. Главное — перед началом работы над проектом определиться, какие у вас по нему цели и что именно надо сделать. А вообще лучше знать возможности не только Photoshop и Figma, но и других программ — Illustrator, Adobe After Effects. Именно это позволит вам вырасти как специалисту и стать тем веб-дизайнером, которому заказчики сами будут хотеть платить больше!

Если статья была для Вас полезной — можете отблагодарить нас своим лайком, это важно для нашей команды! Мы хотим понимать, что действительно интересно для Вас, и работать над контентом. Спасибо!

30 суперполезных сайтов для любителей рисовать в фотошопе

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

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

Кисти и шрифты для фотошопа

Photoshop-orabge: более 800 наборов кистей.
Zerolayer: кисти, формы, рамки, шрифты.
Globator: кисти, стили, шрифты.
Tutbrush: кисти, рассортированные по темам.
Photoshopbrushes: кисти, рассортированные по темам.
Grafamania: кисти, шрифты, шаблоны, рамки.
Balbesof: коллекция кистей.
Coolwebmasters: рождественские и новогодние шрифты, кисти, стили, клипарт.
Vsekisti: очень большая коллекция кистей.
Zerores: шрифты, кисти.

Градиенты и текстуры

0lik: градиенты, паттерны, экшены, стили, текстуры, формы, шаблоны.
Photoshopmix: шаблоны, текстуры, фигуры, экшены, градиенты.
Gzweb: градиенты, экшены, стили, текстуры, формы, шаблоны.
Photoshop-master: текстуры, формы, шаблоны, градиенты, экшены, стили, кисти.
Photodryg: фигуры, шаблоны.
Alldesign: градиенты, экшены, стили, текстуры, формы, шаблоны.

Design-mania: шаблоны, текстуры.
Design: паттерны, рамки, плагины, стили, формы, текстуры.
Photoshop balon: градиенты, стили, текстуры.
Fordesign: градиенты, рамки, шаблоны, текстуры.

Уроки фотошопа

Dburn: видеоуроки.
Goldenone: уроки рисования и ретуши.
Demiart: каталог уроков.
2dtutorials: уроки, клипарт, стили.
Photoshop: уроки, плагины, стили, фигуры.
Photoshopworld: большое количество уроков.
Forum: уроки фотошопа, стили, фильтры.
Deviantart: формы, шрифты, текстуры, кисти.
Сwer: плагины, уроки.
Densvi: уроки, клипарты, текстуры.

Почему UI-специалисты отказываются от Photoshop и переходят на Sketch — Офтоп на vc.ru

«Для меня переход с Photoshop на Sketch был крайне болезненным, — рассказывает Артур Касимов, продуктовый дизайнер «Яндекса».

— Я, что называется, человек старой закалки. Помню ещё ранние версии Photoshop». За 25 лет Photoshop стал стандартом для индустрии веб-дизайна, несмотря на «вес» (программа занимает больше 1 Гб дискового пространства), невостребованные функции в интерфейсе и чрезвычайно запутанную процедуру покупки, на которую даже жаловался создатель соцсети «ВКонтакте» Павел Дуров.

Adobe также выпускает векторный Illustrator, из-за чего разработчикам интерфейсов часто приходилось постоянно держать открытыми сразу два редактора. «Кто-то выходит из этой ситуации выбором в пользу Illustrator, но в силу сформировавшихся привычек было жалко время на это», — рассказывает UI-специалист Антон Фролов.

«Photoshop cоздавался и развивался, как софт для фотографов. Потом его напичкали всем, что только в голову пришло. От этого редактор стал похож на неповоротливого бегемота», — считает продуктовый дизайнер «Яндекса» Артур Касимов. Сложности возникали и со скоростью работы и с производительностью. Например, макеты, содержащие большое количество слоев, заметно замедляли процессы в Photoshop. Особо ощущались «тормоза» при одновременной работе над несколькими макетами.

Кроме того, для создания стандартных интерфейсных элементов — таких как кнопка Mac OS, выпадающий список в браузере или прямоугольник с закругленными краями — приходилось проделывать иногда с десяток действий. Все это отражалось на скорости работы дизайнера. «Photoshop и Illustrator не заточены под веб-дизайн. Поэтому проектирование интерфейсов и любые попытки сделать что-то внятное иначе как костылями не назовешь», — считает UI-специалист компании MacPaw Дмитрий Новиков.

Впрочем, на рынке появлялись альтернативы Photoshop: GIMP, Krita, Paint.NET и другие. Однако они не могли предоставить даже близко необходимый набор инструментов для проектирования интерфейсов, считают UI-специалисты.

Появление Sketch

Несколько лет назад разработчики компании Bohemian Coding выпустили программу для Mac OS под названием Sketch.

Первое отличие, сразу бросавшееся в глаза — приложение являлось альтернативой Photoshop, однако его интерфейс был больше похож на программу из пакета iWork — нативные иконки из Cocoa, минимальное количество инструментов на панели, единственный блок настроек, подстраивающийся под действия пользователя.

В отличие от Photoshop, Sketch не использует собственных средств для отрисовки создаваемого контента — эти функции возложены на встроенные инструменты Mac OS X: QuickTime, Quartz Extreme, Core Image, Core Animation, OpenGL и ColorSync. Благодаря этому даже последняя версия программы занимает всего 42 Мб на диске.

Однако с первыми версиями оказалось не всё так гладко. Многие дизайнеры заметили новинку, но побоялись отказаться от Photoshop. Тогда еще разработчики Sketch не могли определиться, для кого они выпустили продукт — поэтому часть функций напоминала графический редактор, другая часть — приложение для создания сайтов. Sketch 2 расставил нужные акценты — программа была ориентирована на UI-специалистов. Но её бедой было большое количество багов.

«Мы пробовали переходить на Sketch еще в конце 2013. Но это была его вторая версия — очень глючная. Мы убили кучу времени и тогда пришлось вернуться обратно в Photoshop», — рассказал руководитель отдела проектирования и дизайна интерфейсов Mail.Ru Group Юрий Ветров.

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

Sketch

«Sketch очень оптимизирован — в одном документе могут быть отрисованы десятки экранов приложения, доступные для редактирования без лишних действий, и никакой просадки в производительности, — рассказывает Антон Фролов, — Кроме того, очень продуманный интерфейс, ощущение, что это софт от тех, кто в нем же и нуждается — быстрое отображение отступов, удобная работа с символам и стилями, параметрами элементов, интуитивные шорткаты и так далее».

Например, в Photoshop дизайнерам приходилось постоянно подстраиваться под пиксельную сетку, чтобы избавиться от размытых краев объектов.

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

Другой пример — скругленные края у прямоугольных объектов. В Photoshop задать скругление можно было только перед отрисовкой объекта — в случае необходимости дизайнерам приходилось менять положение кривых вручную по пикселам. В Sketch предусмотрели возможность настройки скруглений слоя в любой момент через панель настройки.

В последней версии Sketch появилась еще более глубокая интеграция с нативными средствами Mac OS X: поддержка iCloud, Time Machine, автосохранения, нативный рендер шрифтов, трансляция макетов на мобильное устройство.

«Cамое главное, на мой взгляд — продуманный интерфейс нарезки графики, который парой кликов позволяет указать, в какие папки, с какими именами и размерами нарезать графику. По умолчанию поддерживается нарезка для iOS и Android, но можно добавить и свои форматы», — делится своим опытом Антон Фролов.

Кроме того, часть работы в Sketch можно автоматизировать при помощи плагинов. Например, Measure и InVision, которые позволяют быстро и удобно подготавливать спецификацию для разработчиков. «Со Sketch я стал больше заботиться об автоматизации работы. Многие вещи, которым раньше уделял много времени и внимания, сейчас делаю с помощью плагинов, стараюсь найти более простой и быстрый способ решения задачи», — рассказывает Артур Касимов.

Переход на Sketch

«Преимущество Sketch — низкий порог вхождения, буквально любой может научиться работать в нем за пару дней», — считает UI-специалист компании MacPaw Дмитрий Новиков. — Важно, что здесь вы занимаетесь непосредственно дизайном, а не работой в редакторе — то есть сама программа становится незаметной, и вы можете сосредоточиться на создаваемом продукте».

Переход с Photoshop на Sketch, однако, может оказаться непривычным. «Я настолько привык к Photoshop, что от одной мысли о других графических редакторах мне становилось как-то не по себе, — рассказывает Касимов.

— Ситуация осложнялась тем, что мои коллеги-дизайнеры, с которыми я тогда работал, уже перешли на Sketch и всячески его хвалили. Они подкалывали меня, смеялись. Но я продолжал придумывать отмазки (в первую очередь, для самого себя). Сначала я говорил, что перейду, когда сделают «зум» колёсиком мышки, потом уверял себя, что по окончанию проекта с Photoshop будет покончено. Я и сам видел, что скорость работы в Sketch у моих коллег возросла».

Новиков рассказывает, что ему удалось быстро перейти на новый инструмент благодаря радикальному решению — он удалил всё со своего Mac и оставил только Sketch: «Всего неделя и как будто всю жизнь в нем работал».

Одна из трудностей, по мнению продуктового дизайнера «Яндекса» Артура Касимова, заключалась в непривычных «шорткатах» Photoshop — в Sketch они по умолчанию были другими: «Я не сразу догадался вручную подстроить всё под себя. Но когда сделал это, скорость работы заметно возросла».

Также пользователям Photoshop будет непривычен принцип работы с векторными объектами — в Sketch он больше похож на Illustrator: «К этому я привыкал довольно долго. Но сейчас понимаю, что этот принцип лучше. Значительно лучше», — считает Касимов.

Отказ от Photoshop

Sketch — не идеальный продукт, считают многие опрошенные ЦП UI-специалисты. В программе все еще много багов. В интернете есть даже отдельные ресурсы, которые собирают ошибки и мониторят их исправление.

«Не хватает инструментов для командной работы, что очень актуально для студий и компаний с отдельными командами дизайнеров», — жалуется Фролов. Кроме того, в Sketch практически отсутствует работа с растром, что в некоторых задачах пока не позволяет полностью отказаться от продуктов Adobe.

«Я считаю, что не нужно отказываться от хорошего инструмента, — отвечает Дмитрий Новиков на вопрос об отказе от Photoshop. — Sketch не заменяет Photoshop полностью, он отлично подходит для создания сайтов и интерфейсов, но это не значит что я не могу пользоваться продуктом Adobe для подготовки фотографий или 3D-редактором для моделирования и рендера».

Однако учитывая низкую, по сравнению с Photoshop, стоимость приобретения Sketch ($99,99), Adobe может потерять большой кусок постоянных клиентов в лице UI-специалистов, считают дизайнеры.

Графика для Web — как подготовить изображение в Фотошопе и вставить картинку или фото на сайт

Главная / Вебмастеру / Лучшие программы

26 января 2021

Создание изображения для сайта в Photoshop
Добавляем слои и переносим их на наше изображение
Добавление текста или логотипа на изображение
Рамка КАДРИРОВАНИЯ
Окно ИСТОРИЯ
Как добавить стиль слоя в Фотошопе
Сохранение изображения для Web
Как вставить созданную картинку на сайт

Здравствуйте, уважаемые читатели блога KtoNaNovenkogo.ru. Сегодняшняя статья будет посвящена подготовке в программе Фотошоп (можно и в его онлайн версии Pixlr, описанной здесь) графических файлов для их публикации на сайте. У меня чаще всего используются скрины сделанные на компе или телефоне, а затем прошедшие обработку (в основном в Снагите).

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

Сам я в Photoshop и даже в его упрощенной онлайн версии не силен (довольствуюсь возможностями простенького просмотрщика FastStone Image Viewer, про который речь шла тут и встроенного в него редактора), поэтому мне пришлось обратиться к любимой супруге с просьбой описать процесс подготовки моих фоток со всеми нюансами и тонкостями.

Создание изображения для сайта в Photoshop

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

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

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

Быть уникальными, а не взятыми с других ресурсов
Не слишком маленького размера и формата JPEG, GIF, PNG или BMP.
У них обязательно должны быть прописаны атрибуты Alt (и, при желании, Title), как написано в этой статье. Иначе поисковые системы просто не включат их в свой индекс поиска по картинкам.
В атрибуте Alt должны быть прописаны ключевые слова, по которым вы хотите продвинуть данную фотку.
Желательно, чтобы в названиях графических файлов тоже присутствовали ключевые слова (в виде транслита, по правилам описанных в этой статье о транслитерации)
Необязательным, но желательным условием является то, чтобы в каждом теге IMG ваших изображений были бы прописаны атрибуты WIDTH и HEIGHT. Они служат для задания ширины и высоты изображения и при определенном стечении обстоятельств могут способствовать ускорению загрузки вебстраницы.
Фото должны быть размещены на вашем сайте легально, иначе могут неожиданно возникнуть проблемы с правообладателями. Покупать графику я не агитирую, но можно найти вполне компромиссное решение — бесплатные фотобанки и микростоки, где размещены многие тысячи профессиональных фотоматериалов.

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

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

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

Для создания нового файла в Photoshop заходим в МЕНЮ и выбираем команду СОЗДАТЬ (в более новой версии Фотошопа: МЕНЮ — НОВЫЙ). У нас открывается вот такое диалоговое окно:

В нем мы задаем имя для будущей картинки; выбираем ее размер (ширину и высоту), нажав вкладку НАБОР; а также задаем единицу измерения (пиксели, сантиметры, дюймы…).

Далее задаем ФОН. По умолчанию всегда будет стоять БЕЛЫЙ. Если мы выберем ФОНОВЫЙ ЦВЕТ, то будущее изображение окрасится в тот цвет, который в данный момент находится основным в палитре цветов. Выбрав ПРОЗРАЧНЫЙ фон — поле окрасится шахматкой.

К примеру, мы выбрали прозрачный фон и нарисовали на нем цветочек. При сохранении рисунка с расширением png, у нас сохранится именно цветочек — фона видно не будет, ибо этот формат поддерживает прозрачность.

Слева в интерфейсе Фотошопа находится полоска с инструментами, которая называется ПАЛИТРА ИНСТРУМЕНТОВ. Как раз на ней, в самом низу, и живет описанная выше ПАЛИТРА ЦВЕТОВ.

Для того, чтобы открыть нужное нам фото, мы заходим в МЕНЮ и выбираем команду ОТКРЫТЬ. Далее ищем на своем компьютере папку с нужной фоткой и щелкаем по ней.

Теперь у нас открыто два изображения: созданное нами новое и то, которое мы хотим добавить на новое.

Добавляем слои и переносим их на наше изображение

Самый простой способ перенести одну картинку на другую — это обыкновенное перетаскивание его с помощью мыши. Сначала выбираем инструмент ПЕРЕМЕЩЕНИЕ, а затем хватаем вновь добавленное изображение левой кнопкой мыши и перетаскиваем на то, что создали (пустую заготовку нужного размера с прозрачным фоном), после чего отпускаем.

В моем случае видна лишь новая картинка на прозрачном фоне (показан шахматкой), а созданный документ (заготовка), под названием «Без имени-1», скрыт.

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

Там наш телефончик можно передвигать с помощью мышки в ту область шаблончика, которая нам нужна. Так же передвигать можно с помощью стрелочек на клавиатуре, при условии, что в палитре инструментов выбран инструмент ПЕРЕМЕЩЕНИЕ.

В окне НАВИГАТОР программы Фотошоп мы можем просмотреть наше результирующее изображение. Двигая ползунок — изменить масштаб просмотра, т.о. просмотреть документ как бы через лупу, дабы увидеть возможные недочеты. Изменить же реально масштаб можно, зайдя в МЕНЮ — ИЗОБРАЖЕНИЕ — РАЗМЕР.

В палитре СЛОИ отображается всё, что мы перенесли на наш слой. К примеру, в моем случае, в палитре СЛОИ находятся всего два: созданный шаблон изображения для сайта на белом фоне и одна перенесенная на него картинка (телефончик).

Ее на нашем документе можно не только перенести в любую область, но и наклонить/перевернуть. Для этого в МЕНЮ выбираем РЕДАКТИРОВАНИЕ — СВОБОДНОЕ ТРАНСФОРМИРОВАНИЕ.

Но перед этим, если у вас перенесено уже несколько картинок на нашу заготовку, нужно выбрать нужный слой в палитре СЛОИ, и только потом применять СВОБОДНОЕ ТРАНСФОРМИРОВАНИЕ. В противном случае, трансформирование применится к слою, который будет активным в данный момент, а не к тому, который вам необходимо наклонить/перевернуть.

Выбрав команду СВОБОДНОЕ ТРАНСФОРМИРОВАНИЕ, наше изображение выделится тоненькой рамочкой.

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

Добавление текста или логотипа на изображение в Photoshop

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

Для этого в панели инструментов Фотошопа выбираем ТЕКСТ. Ставим курсор на нужное место в заготовке (созданном документе) и начинаем вбивать нужный нам текст, к примеру, адрес вашего сайта.

В настройках инструмента ТЕКСТ (смотрим рисунок выше) можем задать следующие настройки, выделив мышкой то, что мы написали в документе:

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

Выбрав в окне Photoshop инструмент ПЕРЕМЕЩЕНИЕ (о нем писалось выше), с помощью мышки или стрелочек на клавиатуре, мы можем переместить в другое место текст логотипа на нашем шаблоне.

Рамка КАДРИРОВАНИЯ

Допустим, ваше изображение оказалось бОльшего размера, чем вам нужно (кстати, если фото не очень хорошего качества, то его можно использовать ретушь). Если вы будете уменьшать его с помощью команды в меню ИЗОБРАЖЕНИЕ — РАЗМЕР, то, изменив его по горизонтали, оно автоматически изменится и по вертикали, и наоборот.

Чтобы такого избежать и существует инструмент РАМКА КАДРИРОВАНИЯ. Выбираем его в окне Фотошопа, щелкам по нужному месту на заготовке и, зажав левую кнопку мыши, растягиваем рамочку, после чего отпускаем левую кнопку мыши.

Рамку кадрирования можно увеличить или уменьшить, ухватившись мышкой за ее уголочки. То, что мы хотим отрезать на итоговом изображении, будет затемнено. Выделили область, которую мы хотим оставить, и нажимаем кнопочку ПРИМЕНИТЬ КАДРИРОВАНИЕ (показано на рисунке выше).

Окно ИСТОРИЯ

В окне ИСТОРИЯ прописываются все наши действия в этой замечательной программе. В моем случае их было совершено пять: создание нового документа для последующей публикации на сайте, перетаскивание на него слоя с картинкой, перемещение рисунка телефончика в другое место на заготовке, перетаскивания туда же слоя с логотипом (в вашем случае — написание текста с помощью инструмента ТЕКСТ) и последующее его позиционирование в нужное место.

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

Так же шаг назад в Photoshop можно сделать с помощью: МЕНЮ — РЕДАКТИРОВАНИЕ — ШАГ НАЗАД.

Если у вас не наблюдается окна ИСТОРИЯ или какого другого описанного мною окна, то зайдите в МЕНЮ — ОКНО и поставьте галочку у нужного вам: история, слои, навигатор и т.д. Окна на рабочем столе в программе Фотошоп можно перемещать с помощью мышки.

Как добавить стиль слоя в Фотошопе

Если мы хотим добавить стиль одному слою, то делаем его активным и нажимаем кнопочку ДОБАВИТЬ СТИЛЬ СЛОЮ, если всему документу, то выделяем все слои с помощью удержания клавиши Shift на клавиатуре, а затем объединяем все три слоя в один, щелкнув по выделенным слоям правой кнопкой мыши и выбрав команду ОБЪЕДИНИТЬ СЛОИ, после чего нажимаем кнопку ДОБАВИТЬ СТИЛЬ СЛОЮ. Шайтанама.

При нажатии на кнопку ОБЪЕДИНИТЬ СЛОИ у нас откроется диалоговое окно с выбором стиля. Но есть и еще один способ открытия этого окна в Photoshop — двойной щелчок мышкой по уже единственному у нас слою в палитре СЛОИ. В этом случае у нас откроется вот такое диалоговое окно со всеми настройками задания стиля:

Данные настройки придадут вашему документу неповторимый стиль. Вы можете применить:

тиснение (сделать картинку объемнее)
наложить тени, как внутренние, так и внешние
задать свечение внутреннее или внешнее, а может и то, и другое
заключить наш документ в рамку
задать ее ширину
цвет и т.п.

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

Сохранение изображения для Web

JPG — это основной формат, в котором сохраняют фотографии. GIF лучше всего применять для сохранения растровых (состоящих из пикселей) изображений с количеством цветом не более 256. Этот формат отлично поддерживает анимацию, а так же часто применяется в web-дизайне.
PNG очень схож с GIF, только в отличии от него может отображать большее количество цветов. Подробнее о форматах Gif, Png, Jpg (Jpeg) растровой графики вы сможете прочитать тут.

Чтобы сохранить изображение в Фотошопе, заходим в меню и выбираем ФАЙЛ — СОХРАНИТЬ КАК, но для интернета лучше всего сохранить иным способом: заходим в меню и выбираем ФАЙЛ — СОХРАНИТЬ для Web устройств.

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

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

Как вставить созданную картинку на сайт

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

В этом случае графический файл загружается на сайт с помощью инструментов визуального редактора. Довольно удобно и просто. Но вот я, почему-то, всегда предпочитал другой способ вставки. Сначала подключаюсь к сайту по FTP c помощью моего любимого FTP клиента FileZilla, подробно описанного тут.

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

<img alt="" src="https://ktonanovenkogo.ru/image/25.10.png" />

Для класса img_center1 в моем стилевой файле (из папки с текущей темой оформления Вордпресс) прописано следующее правило:

.img_center1{display:block;background:#e0e0e0;padding:5px;margin:10px auto !important;}

CSS свойство display делает картинку блочным элементом. Ну, а затем с помощью margin:10px auto мы выравниваем ее по середине (по горизонтали). Про CSS свойства margin и padding читайте здесь. Ну, а background, которому посвящена эта публикация, задает серенький фон, который слегка проглядывает по краям, создавая эффект рамки.

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

Лично я пишу статьи в WordPress, используя только HTML редактор, в котором для удобства добавил кнопки, позволяющие быстро вставлять в текст штампы:

Таким образом можно очень быстро вставить фото на блог. Дополнительные кнопки в Html редактор можно добавить с помощью плагина Post Editor Buttons. Как нибудь опишу подробно работу с ним, а пока вы можете сами пробовать разобраться, тем более, что там ничего сложного нет.

Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru

Использую для заработка

Секреты favicon.ico или как создать иконку для сайта в Photoshop — Da Diego

Вы хотите оригинальную и красивую иконку для вашего сайта? Сделайте её сами – в этом вам поможет данная статья.

Favicon (сокр. от англ. FAVorites ICON — «значок для избранного») – это специальная стандартная или пользовательская иконка маленького размера, которая находится слева от ссылки (URL) в адресной строке веб-браузера. Также такие иконки используются в закладках рядом с названием сайта, во вкладках браузеров или как ярлык для web-страниц на рабочем столе или других папках Windows. Под маленьким размером подразумевается 16 на 16 пикселей – стандартный размер для иконок данного типа. Основная цель такой иконки — сделать дизайн вашего сайта целостным и детализированным.

Все, что вам необходимо сделать, чтобы добавить иконку на сайт – это поместить готовый «favicon» в формате Windows Icon (.ico) в корневую папку вашего сайта. Большинство современных сайтов, за исключением Internet Explorer (IE), поддерживают использование иконок в формате GIF (включая анимированные варианты) и PNG (включая поддержку полной прозрачности фона), но так как абсолютно все браузеры, IE в том числе, понимают формат .ico, имеющий особенности, которые не дублируются в GIF и PNG, предлагаю ознакомиться именно с их созданием.

Системные требования
Так как мы будем создавать иконки в “Photoshop”, нам необходимо научить программу понимать расширение Windows Icon (ICO). Для этого нам потребуется специальный плагин экспорта формата файлов .ico, который можно бесплатно загрузить с Telegraphics. Плагин читает и записывает ICO-файлы в 1, 4, 8-битных индексированных и 24-битных RGB режимах, а так же читать и записывать 32-битные “ХР” иконки (с 8-битным альфа-каналом). Чтобы установить плагин, вам необходимо на сайте разработчиков выбрать подходящий вариант системы, распаковать скачанный архив и поместить в папку “x:\Program Files\Adobe\Adobe Photoshop CS5.1\Plug-ins\File Formats\” (х = буква вашего диска, на который установлен Photoshop) файл с расширением “.8BI”, после чего запускаем или перезапускаем сам Photoshop.

Приступаем к созданию
Так как рабочая зона размером в 16х16 пикселей является недостаточно большой для удобной работы с изображением, лучше начать ваш проект с размером рабочей зоны хотя бы 64х64 пикселя (лучше использовать как можно большие размеры при создании иконок для более удобного выражения творческих идей, впоследствии изображение можно легко отмасштабировать с сохранением пропорций). Чтобы задать необходимые размеры рабочего поля необходимо выбрать в меню Photoshop пункт «File>New» или нажать сочетание клавиш Ctrl+N.

Дизайн иконки
Если у вас уже имеется готовый логотип большего размера, попробуйте уменьшить его до 16х16 пикселей и посмотрите, как хорошо он смотрится. Если при таких размерах логотип плохо различим и его графическая информативность невысока, создайте поле 64х64 пикселя и сделайте наипростейший дизайн иконки, который будет содержать основные цвета вашего сайта. Когда вы будете готовы протестировать готовый дизайн — выберите меню «Image>Image Size» или нажмите комбинацию клавиш «Alt+Ctrl+I» и задайте размер 16х16, выставив при этом режим интерполяции «Bicubic Sharper» (этот режим наилучший для уменьшения изображения и дает возможность оценить будет ваша иконка “размытой” при уменьшении или нет). В случае, когда изображение все-таки недостаточно четкое, вернитесь к исходному изображению и сделайте ваш рисунок более четким, насыщенными и/или контрастным, после чего заново отмасштабируйте вашу иконку.

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

Сохранение и загрузка полученной иконки
Для сохранения полученного результата необходимо в меню выбрать пункт «File>Save As» или нажмите комбинацию клавиш «Shift+Ctrl+S» и задать обязательное имя файла «favicon.ico». В меню «Format» необходимо выбрать Windows Icon (ICO) из выпадающего меню. Этот формат будет доступен в Photoshop, только если вы скачали и правильно установили необходимый плагин и задали правильный цветовой режим при создании рабочего окна (1, 4, 8-битный индексированный или 24-битный RGB).

Следующим шагом будет размещение новой иконки в корневой папке вашего сайта. Для этого соединитесь с сервером, на котором находится ваш сайт, и закачайте туда созданный «favicon.ico». Этот файл необходимо обязательно поместить в папку, в которой находится домашняя (index.html) страница, а не в папку с изображениями или какую-либо другую папку, так как стандартным местоположением этого файла является именно корневая папка сайта. Если файл был правильно размещен (а его название точно «favicon.ico»), большинство браузеров автоматически распознают его.

Однако для некоторых браузеров необходимо указать прямую ссылку на иконку вашего сайта непосредственно в HTML-коде, а именно добавить ее в хедер каждой страницы, на которой необходимо разместить «favicon.ico»:

В большинстве современных тем для Joomla, WordPress и прочих движков используются отдельные файлы (например “header.php”), где достаточно прописать 1 раз эту строчку в начале файла и все страницы будут автоматически подхватывать указанные в них настройки. Также существует расширенный вариант написания данной строчки:

Если вы сомневаетесь, какой вариант подходит именно вам, пропишите обе строчки.

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

Для использования иконки в формате GIF или PNG необходимо прописать следующие строчки:

или

Однако запомните, что оба эти формата не поддерживаются IE и не будут в нем работать.

Мультиразмерный Favicon
Помимо обычного favicon размером 16х16 пикселей, которые используются для оформления адресной строки, существует его разновидность с размерами в 32×32 пикселя и 48×48 пикселей. Эти иконки очень распространены в среде Windows. Например, если вы хотите поместить ярлык на веб-страницу на ваш рабочий стол, Windows автоматически попытается использовать favicon в качестве изображения для ярлыка. Но стандартного размера (16х16 пикселей) будет недостаточно для качественного отображения, так как стандартный размер ярлыка в среде Windows 48х48 пикселей – это значит, что ярлык будет растянут до необходимых размеров и станет некрасивым и практически нечитаемым.

Однако существует способ исправить этот недостаток. Полезное свойство файлов .ico заключается в том, что они могут содержать в себе много вариантов одной и той же иконки с разными размерами и глубиной цвета (наподобие возможности .gif-файлов содержать множество фреймов). Поэтому если поместить в favicon.ico изображение сразу в нескольких размерах и с разной глубиной цвета, Windows сможет автоматически выбрать наиболее подходящие параметры для применения к ярлыку. Наиболее распространённые размеры ярлыков, которые могут быть использованы, — 16×16, 24×24, 32×32 и 48×48 пикселей.

Создание мультиразмерной иконки не намного сложнее, чем создание обычного favicon размером 16х16 пикселей. Необходимый плагин мы можем найти все на том же сайте Telegraphics, он позволит поместить несколько иконок в одном .ico-файле. В принципе это даже не плагин, а отдельная программа, которую можно использовать как в Windows (через командную строку), так и в MacOS (посредством перетаскивания). Также у этой программы существуют аналоги, как например: Sib Icon Studio (www.sibcode.com/icon-studio) и Any to Icon Convertor (www.aha-soft.com/anytoicon).

Что касается глубины цвета, вы могли заметить, что некоторые иконки имеют неровности (как зазубрины) по краям, в то время как другие сглаживают эти неровности и выглядят очень симпатично. Это возможно благодаря 32-битной глубине цвета, которая отображает настоящую прозрачность, как и Photoshop. Вы можете создать 32-битную версию иконки вместе с 24-битной (16 миллионов цветов, с поддержкой прозрачности как в .gif-файлах), 16-битную (256 цветов) и даже 8-, 4- или 2-битную версию, и поместить их всех в один ico-файл.

Поэтому если вы хотите быть уверенными, что ваш favicon будет смотреться красиво во всех возможных случаях – лучше сделать его сразу в нескольких варианта. Например:

16×16, 16-бит (256) цветов
16×16, 32-bit colors
32×32, 16-бит (256) цветов
32×32, 32-bit colors
48×48, 16-бит (256) цветов
48×48, 32-bit colors

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

Решение возможных проблем
Общие проблемы
В случае если после проделанных действий ваш «favicon» так и не появился, попробуйте несколько раз (около 5) обновить вашу страницу или очисть кэш браузера, или поставьте “?” в конце ссылки (например “http://diego.com.ua/?”) — это действие заставит думать браузер, что страница является новой и еще не была добавлена в кэш.

Еще одним способом решения этой проблемы является переход по прямой ссылке на ваш «favicon» (например: http://diego.com.ua /favicon.ico), после чего браузер (IE) немедленно отобразит и запомнит иконку.

Проблемы совместимости с браузерами
“Microsoft IE 6” (а также 7, 8 и 9) может не отображать “favicon” до тех пор, пока ссылка на вашу страницу не будет добавлена в избранное. В таком случае попробуйте следующий вариант – зажмите левую клавишу мышки на отображаемом “favicon” (обычно стандартная иконка IE), после чего “потрясите” его и отпустите. Данные действия приведут к перезагрузке страницы и обновлению иконки. Другим способом решения данной проблемы является добавление следующего кода в секцию “” страниц, на которых вы хотите видеть ваш “favicon”:

“Safari” для Mас-систем не будет отображать обновленный “favicon” до тех пор пока не будет очищен кэш браузера. Однако нажатие кнопки меню “Empty cache” не решит проблему, так как “Safari” хранит иконки в отдельной папке. Чтобы очистить папку кэша иконок необходимо зайти в меню “Edit > Reset Safari” и поставить галочку напротив “Remove all website icons”. Альтернативным (ручным) способом является удаление содержимого следующей папки: “User>Library>Safari>Icons”. Для Windows-версии “Safari” путь немного отличается: “C:\Documents and Settings\YourUserName\Local Settings\Application Data\Apple Computer\Safari”, в этой папке необходимо удалить файл “WebpageIcons.db”. Напоминаю, что папка “Local Settings” и вложенные в неё папки скрыты по умолчанию, а значит для того, чтобы в них попасть, необходимо настроить отображение скрытых файлов и папок Windows. После удаления вышеуказанных фалов необходимо перезапустить “Safari” (в некоторых случаях также необходимо перезагрузить компьютер).

Для решения аналогичной проблемы в “Mozilla FireFox” необходимо очистить кэш браузера и перезапустить программу.

В браузере “Opera” такой проблемы нет, поэтому после обновления вашей иконки достаточно простого обновления страницы (возможно несколько раз).

Другой проблемой в ОС “Windows” является обновление иконок для Интернет-страниц (к примеру, при размещении иконки страницы на Рабочем столе). Для принудительного обновления изменившихся иконок необходимо выполнить следующие действия:
1. Нажать правой кнопкой по Рабочему столу;
2. Выбрать пункт меню “Свойства” (для “Windows XP”) или “Персонализировать” (для “Windows Vista” или “Windows 7”) и перейти на вкладку “Свойства Экрана”;
3. Поменять качество цветопередачи с 32-разрядного на 16-разрядное и нажать кнопку “ОК” или “Применить”;
4. Обратно поменять качество цветопередачи на 32-разрядно и нажать кнопку “ОК” или “Применить”.

Проблемы с плагином “Photoshop”для работы с иконками
Формат “Windows Icon” (ICO) будет недоступен, если:
1. Вы неправильно установили плагин;
2. Вы неправильно определили версию плагина подходящую для вашей ОС;
3. Рабочая область в “Photoshop” была создана не в 1, 4, 8-битных индексированных или 24-битных RGB режимах.

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

Как сделать рекламный баннер в Фотошопе для сайта

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

Это наш очередной урок по Фотошопу. И прямо сейчас мы пошагово расскажем и покажем, как создать баннер размером 300×600 пикселей. Такой размер обычно используется в сайдбарах (боковых панелях) сайтов.

Для примера возьмем изображение наушников от SONY и загрузим его в проект:

Это руководство раскроет вам не техническую сторону вопроса, а именно методику, по которой стоит создавать баннеры в Photoshop.

Что нужно знать

Чтобы CTR (соотношение кликов к показам) был высоким, баннер нужно делать очень контрастным, чтобы он ни коим образом не сливался с общей цветовой гаммой сайта, но при этом и не пестрил в глазах.
Не стоит подробно расписывать все, что вы знаете о товаре – это только оттолкнет пользователя. Самое главное, чего хотят люди – узнать название товара, цену на него и есть ли скидка/акция.
На баннере должен присутствовать обязательный призыв к действию. Обычно этим самым призывом выступают слова “Купить”, “Заказать” или “Подробнее”.
Как бы вы не креативили с баннером, главное изображение (товар) должно находиться в центре внимания.

Исходя из выше сказанного, макет баннера размером 300×600 будет выглядеть так:

Найти картинки для баннера можно и в Google картинках, но лучше взять фото на сайте самого поставщика/продавца. Оттуда же возьмите и логотип.

Что касается кнопки, то ее тоже можно скачать в Google картинках, но нам не составит труда создать ее в Фотошопе.

Давайте добавим 3 этих элемента:

Формат шрифтов

Смотрите также: “Как изменить размер изображения в Фотошопе CS6 и CC”

При создании баннера необходимо соблюдать его привлекательность. Для это все должно быть плюс-минус симметричным, а надписи желательно создавать используя единый шрифт. В нашем случае мы использовали Fira Sans. Это, естественно, не касается логотипов и кнопок с плашками.

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

Работа с фоном

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

Берем инструмент “Градиент”:

В настройках инструмента выставляем переход от светло-серого к прозрачному, а вид градиента выбираем “Радиальный”.

Остается только залить фон. Если вы не знаете, как работать с этим инструментом, то советуем для начала ознакомиться с этим уроком: Как залить фон в Фотошопе CS6 и CC

У нас получился такой результат после заливки:

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

Симметрия объектов

Смотрите также: “Как выделить слой в Фотошопе”

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

Для этого нам включаем линейки и, благодаря направляющим, выравниваем объекты:

Вот теперь можно сказать, что баннер готов:

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

На этом все! Благодаря программе Фотошоп и простым действиям мы смогли оперативно сделать баннер. Надеемся этот урок помог вам. Не стесняйтесь задавать свои вопросы в комментариях.

До встречи в наших следующих уроках!

Как создать Mockup упаковку в Photoshop – PhotoDrum.com – сайт дизайнера

Хотите узнать, как можно самим создать реалистичную упаковку продукта (Mockup Box) в Photoshop? Тогда этот урок для вас.

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

Из дополнительных материалов, которые нам потребуются для урока – это парочка бесплатных шрифтов, если же у вас есть свои, то можете использовать их.
Non – Dafont
Antipasto – Dafont

Создание и настройка документа

Давайте начнем создав в Photoshop холст размером 1588×1191 пикселей, затем, изменим цвет фона на #d2d3d5;

Для удобства и обеспечения более аккуратного вида в работе над уроком, нам нужны линейки и сетка. Вы можете получить доступ к вспомогательным линейкам, перейдя в View> Rulers (или нажмите Ctrl + R), а для включения сетки выберите View> Show> Grids (или нажмите Ctrl + ,). Ниже вы можете посмотреть на мои настройки для сетки:

Рисуем коробку

Создайте новую группу и назовите ее “Right Side / Правая сторона”. Создайте в этой группе новый слой и назовите его как “Right Side / Правая сторона”, а также, используя инструмент Rectangular Marquee Tool, создайте выделенный диапазон 795×1078 пикселей. После того, как вы это сделали – залейте выделенную область любым цветом. Я сделал его белым (#ffffff).

Затем, переведите этот слой в смарт-объект (сделать это можно щелкнув правой кнопкой мыши на слой и выбрав “Make A Smart Object“). Это позволит нам вносить изменения в слой без необратимой деградации.

Создать еще одну группу, но на этот раз назовите ее “Left Side / Левая сторона”. Создайте новый слой с таким же именем (Left Side). Так же, как мы делали ранее, нужно сделать выделение области и заливку любым цветом. На этот раз сделайте выделенную область размером приблизительно 483×1078 пикселей. Преобразуйте слой в смарт-объект.

Перед тем как приступить к непосредственному дизайну, давайте настроим слои и приведем их в 3D вид. И начнем мы с правой стороны коробки. Выберите этот слой и нажмите Ctrl + T, нам необходимо немного уменьшить этот слой (примерно на 75%). Убедитесь, что вы не забыли нажать на иконку цепочки, чтобы сохранить пропорции объекта. Затем перейдите к Edit> Transform> Perspective и трансформировать его так, как показано на картинке ниже: (изменяя положение узлов правой стороны):

Нажав Ctrl + T, и удерживая клавишу Ctrl вы будете изменять положение только выделенного узла.

Что касается левой части коробки, то мы сделаем следующее: Во-первых, уменьшаем слой на 75%. Удерживая клавишу Ctrl – трансформируйте его так, чтобы он стал выглядит как 3D. У вас должно получится что-то вроде этого:

Создаем оформление коробки

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

Для своего дизайна я сделал небесно-синюю цветовую схему. Так что если вы хотите сделать как у меня – измените цвет фона на #e1ebe4. После того мы создали задний план, давайте продолжим, и сделаем заголовок (размещенный сверху и по центру). Я использовал для этого следующие шрифты и настройки (цвет #1f1f20):

Чтобы не было слишком скучно я решил добавить больше деталей и вставил символ “галка” (#009a81). А также символ зарегистрированного товарного знака, используя Custom Shape Tool.

Затем, я добавил текст под заголовком, используя Paragraph Tool. Я использовал следующие параметры:

Закончим, добавив еще один текстовый блок внизу по-центру.

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

Теперь давайте продолжим с левой частью. Так же, как и прежде, выберите и дважды щелкните значок смарт-объекта в панели слоев, чтобы открыть его, а затем создайте для него свой дизайн. Для тех, кто решил последовать за моим уроком до конца – измените цвет фона на #a5dfda, а затем просто скопируйте и поместите название и описание, которые мы делали на правой части коробки, но с одним только изменением – поверните текст на 90 градусов (как показано на картинке ниже). Изменение цвета символа “галки” на белый и добавьте еще два дополнительных символа (все символы, которые я здесь использовал, можно найти во вкладке Custom Shape Tool).

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

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

Дополнительные детали

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

Давайте начнем этот этап с создания новой группы и на этот раз назовем ее “Shadows / Тени”. В этой группе создайте новый слой и назовите его “Back”. Продолжим, сделайте выбор, размер которого должен быть примерно как наша коробка, и залейте его черным цветом. После того, как вы сделали это, удерживая клавишу Ctrl, сделаем его искажение, как показано ниже. После, сделайте размытие слоя с помощью фильтра Gaussian Blur, затем, измените режим смешивания этого слоя с тенью на Soft Light.

Создайте новый слой и назовите его “Bottom“. Измените цвет переднего плана на #000000, и с помощью инструмента кисти (относительно большого размера, и твердости 0%), случайным образом сделайте несколько мазков в нижней части окна, затем измените режим смешивания на Soft Light и измените непрозрачность слоя до 85%.

Создайте новый слой и на этот раз назовите его “Light“. Изменение цвета фона на #ffffff. Сделайте размер кисти немного больше и сделайте три мазка в центре коробки. Измените режим смешивания слоя на Soft Light.

Создайте новый слой и назовите его “Bottom 2“. Затем выберите инструмент кисть и измените для его настройки следующим образом:

Выберите инструмент Pen Tool и сделайте путь вдоль нижней части коробки, которая соприкасается с полом, а затем нажмите правой кнопкой мыши и выберите Stroke Path. Убедитесь, что у вас выставлена галочка рядом с настройкой Stimulate Preassure. Далее, измените непрозрачность и заполнение (Opacasity / Fill) соответственно до 50% и 55%.

Откройте группу “Right Side” и создайте два новых слоя и назовите их “Shadows / Тени” и “Shadows 2 / Тени 2”. Сделайте эти оба слоя маскированными по базовому (Ctrl+Alt+G). Используйте мягкую кисть с твердостью 0% и установив режим смешивания для обоих слоев на Soft Light. На первом слое “Shadows” нарисуйте большую форму “U” по краям коробки. На втором слое “Shadows 2”, используя ту же самую кисть, но с небольшой непрозрачностью, сделайте несколько мазков вокруг текста, чтобы придать ему больше глубины.

Создайте два новых слоя и назовите их “details:shadows / детали:тени” и “details:highlights / детали:свет».

Повторите два последних шага для левой части коробки.

Создайте новую группу и назовите ее “Details / Детали”. Далее, создайте новый слой и назовите его “Left Flap / Левый клапан”. Используя инструмент Pen Tool, вам нужно создать фигуру похожую на треугольник, но плоской формы и со сглаженным верхним углом. Затем щелкните правой кнопкой мыши и залейте его # 767676 цветом. Затем, добавьте внутреннюю тень (Inner Shadow):

А также добавьте внутреннего свечения (Inner Glow):

Создайте новый слой и назовите его “Shadow / Тень”. Повторим сделанные ранее манипуляции, но с немного большим размером кисти (размер 4-6px), нарисуйте линию вдоль грани, которая разделяет левую и правую часть коробки (разместите ее чуть правее). Затем, немного размойте ее с помощью Gaussian Blur и измените режим смешивания на Soft Light (на рисунке ниже она изображена красной линией):

Повторите предыдущий шаг, но на этот раз назовите слой “Highlights” и используйте цвет #ffffff. Сместите этот слой немного левее (как на изображении ниже синяя линия):

Создайте еще один слой и назовите его “Line / Линия”, и используя инструмент Line Tool проведите линию (примерно 2-3px и цветом #000000) между нарисованными ранее линиями. Измените ее режим смешивания на Soft Light (На рисунке ниже я обозначил ее белой линией):

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

А вот еще одна вариация:

У нас все получилось! Не стесняйтесь и пишите в комментариях, если вы столкнулись с проблемами на каких-либо этапах.

Автор здесь.

50 лучших уроков по интерфейсу веб-сайта по Photoshop

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

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

Вот обзор некоторых из лучших руководств по Photoshop, связанных с дизайном интерфейса веб-сайтов .

100 лучших руководств по текстовым эффектам в Photoshop

Эффект текста, пожалуй, один из наиболее часто используемых, а также наиболее универсальных методов в … Читать дальше

Тема Shopify для товаров ручной работы в Photoshop — В этом уроке вы собираетесь создать тему веб-сайта Shopify для товаров ручной работы.Он ориентирован на шрифты и выбор цвета .

Создание целевой страницы туристического стартапа с помощью Photoshop — Эта статья проведет вас через процесс создания быстрого туристического стартапа. У него чистый профессиональный дизайн и много отрицательного пространства .

Стильная страница портфолио временной шкалы с использованием Photoshop — В этом уроке вы увидите процесс создания красивого портфолио временной шкалы для дизайнеров , фотографов, иллюстраторов и других креативщиков.

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

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

Создание элегантного макета блога в Photoshop — В этом уроке вы увидите процесс создания чистого минималистичного макета журнала в Photoshop с полужирным шрифтом в заголовке и элегантной типографикой .

Простое портфолио на основе Instagram в Photoshop — Это руководство для веб-сайта портфолио, вдохновленное Instagram. Вы собираетесь на использовать привлекательные изображения, чистый макет и красивые шрифты .

Построение отзывчивого портфолио временной шкалы — Вот еще один аналогичный учебник по портфолио временной шкалы, но на этот раз с адаптивным дизайном. Вы будете использовать некоторую адаптивную технологию вместе с анимацией CSS3, Sass и немного jQuery .

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

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

Текстурированный веб-сайт на открытом воздухе в Photoshop — В этой статье вы увидите, как создать веб-сайт на открытом воздухе в Photoshop.Он использует градиенты, текстуры и текстовые блоки .

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

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

Создайте инновационный сайт-портфолио с использованием альтернативного UI / UX — Создайте уникальное портфолио, которое будет выделяться из толпы в Photoshop, используя это краткое руководство.

Создание профессионального макета блога в Photoshop — В этой статье вы узнаете, как создать профессиональный минималистичный макет блога в Photoshop. Вы увидите , как сочетать шрифты, цвета и узоры .

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

Создание минималистичного макета блога в Photoshop — это быстрое и простое руководство о том, как создать минималистский макет блога в Photoshop. Вы узнаете, как работать с текстурами, создавать заголовок и выбирать подходящие шрифты .

Создание макета веб-сайта блога — Это полное пошаговое руководство о том, как создать веб-сайт блога в Photoshop. Он включает бесплатный PSD и HTML шаблон .

Как создать яркое портфолио Веб-дизайн в Photoshop — это простой, но длинный урок о том, как создать портфолио дизайнера в Photoshop.

Как создать гладкий дизайн веб-сайта на основе сетки — Это простой урок о том, как создать темный гладкий макет веб-сайта в Photoshop. Вы будете использовать дизайн на основе сетки , градиенты и столбцы .

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

Создайте теплый и веселый интерфейс веб-сайта в Adobe Photoshop — Здесь вы узнаете, как создать веселый и уютный интерфейс веб-сайта с помощью Photoshop. Вы будете работать с узорами, простыми формами, стилями абзацев и многим другим.

Создание профессионального и чистого веб-макета (с преобразованием PSD в HTML) — Это руководство по созданию веб-сайта разделено на две части: в первой вы создадите красивый веб-сайт в Photoshop.А во второй части вы собираетесь конвертировать ваш сайт из файла PSD в полный HTML .

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

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

Создание профессионального макета Web 2.0 — Учебное пособие по Photoshop о том, как создать профессиональный высококачественный веб-сайт. Он содержит многих популярных техник Photoshop, покрытых , так что вы можете улучшить свои навыки.

Создание страницы «Скоро будет» в Photoshop — Страницы веб-сайта «Скоро будут» созданы, чтобы заинтриговать посетителей новыми функциями, дизайном веб-сайта или любыми другими изменениями. В этом руководстве вы увидите процесс создания простой страницы , которая скоро появится, с таймером обратного отсчета .

Создайте чистый интерфейс веб-сайта электронной коммерции в Photoshop — В этом уроке вы узнаете, как создать веб-сайт электронной коммерции в Photoshop. Автор также делится своими советами из первых рук, которые вам обязательно пригодятся.

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

Макет блога в стиле журнала — В этом уроке вы создадите простую страницу журнала с предстоящими сообщениями, изображениями, добавленными сообщениями, меню, логотипом и полем поиска .

Создайте стильно элегантное портфолио Веб-дизайн в Photoshop — Для творческих людей важно иметь впечатляющее онлайн-портфолио. Создайте потрясающий веб-сайт-портфолио, следуя этому руководству.

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

Создайте элегантный веб-сайт фотографии в Photoshop — Здесь вы научитесь создавать простое элегантное портфолио фотографии в Photoshop. Этот веб-сайт использовался в качестве темы WordPress, и вы можете сделать то же самое.

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

Web Tutorial: Designing and Coding a Clean Multi Purpose Website — Вот подробное руководство о том, как создать и затем кодировать чистый элегантный веб-сайт. Его можно использовать для любого бизнеса, так как имеет универсальную конструкцию .

Как создать красивую целевую страницу с помощью Photoshop — Научитесь создавать потрясающую целевую страницу для любого продукта или услуги в Photoshop, следуя этому руководству.

Учебное пособие по дизайну веб-сайтов в Photoshop — Стильное портфолио с зернистой текстурой — Это бесплатный видео-урок о том, как создать портфолио с зернистой текстурой в Photoshop.Он имеет темную цветовую схему и текстурированный зернистый фон с градиентами .

Афро-портфолио Дизайн веб-сайтов в Photoshop — Учебник по Photoshop CC — Это 51-минутный видеоурок о том, как создать одностраничный веб-сайт в CC Photoshop. Он имеет яркого смелого дизайна, креативные шрифты и галерею изображений.

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

Create A Basic Web For Beginners — Это отличное руководство по Photoshop для начинающих, которое поможет вам создать базовый веб-сайт. Вы создадите заголовок изображения, меню, блок услуг и контактную форму .

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

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

Создание профессионального веб-сайта (часть 1) — Это первая часть видеоурока, который научит вас создавать профессиональный веб-сайт с нуля. Вы будете использовать простые формы, значки и шрифты .

Одностраничный веб-сайт с плоским дизайном — Вот подробное часовое руководство о том, как создать веб-сайт с плоским дизайном в Photoshop и Illustrator. Вы будете использовать Photoshop для создания веб-сайтов и Illustrator для работы с векторными иконками .

Учебное пособие по веб-дизайну: как создать веб-сайт в Photoshop — это краткое видео-руководство о том, как создать веб-сайт спортивного ресторана. Вы будете использовать простые формы , цвета, типографику и изображения .

Как создать веб-сайт в Photoshop — В этом уроке вы увидите процесс создания простого веб-сайта в Photoshop. Вы будете использовать макет ноутбука, простые формы и текстовую трансформацию .

Создание плоского дизайна веб-сайта в Photoshop с использованием плоского пользовательского интерфейса — Вот видеоурок от Designmodo о том, как создать веб-сайт с использованием плоского пользовательского интерфейса.Вы будете использовать популярные техники Photoshop , которые дизайнеры используют для создания современного плоского дизайна .

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

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

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

Читайте также: 20 свежих руководств по Adobe Illustrator, которые стоит изучить в 2020 году

Как ускорить процесс создания каркасов с помощью Photoshop и Adobe XD — Smashing Magazine

Об авторе

Мануэла — цифровой иллюстратор из Неаполя, Италия.Она начинала как веб-дизайнер, но затем последовала своему основному увлечению: Adobe Illustrator. Рисунок — это ее… Больше о Мануэла ↬

(Эта статья любезно спонсирована Adobe.) Работа с каркасами позволяет проявить творческий подход, не беспокоясь о стиле или дизайне вашего проекта. В этом руководстве вы узнаете, как создать целевую страницу для веб-сайта онлайн-курса, и предложите мобильный каркас, который вы можете использовать, чтобы практиковаться и следовать за ним.

Перед тем, как начать любой дизайн-проект, есть одно слово, которое обязательно будет следовать за вами с самого начала: wireframing .Сегодня мы узнаем, как создать каркас в Adobe XD и как реализовать некоторую графику из Photoshop, просто используя библиотеки.

Но сначала, что такое каркас?

Каркас — это визуальное представление структуры вашего проекта. Он определяет кости, элементы, которые будут работать в вашем макете, и размещение контента для вашего прототипа.

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

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

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

В первую очередь, создание каркаса« вручную »имеет большой смысл. Это поможет вам разработать всю идею на бумаге (без цифровых ограничений), а также позволит легко реализовать ваши концепции. Тем из вас, кто работает в команде, работа с бумагой не кажется лучшим подходом, если вы хотите поделиться своими мнениями со всеми, кто участвует в проекте, особенно если вы работаете со своей командой в Интернете.

В этом руководстве мы рассмотрим следующие шаги:

Создайте каркас, выберите и вставьте ресурсы PS через библиотеки;
Обновите файлы PS и просмотрите результаты в Adobe XD.

Мы создадим набор объектов для использования в нашем каркасе. Мы отложим их в наши активы, так как у нас была дополнительная панель, откуда мы можем взять наши инструменты.

Закончив с этим, вы можете сохранить его и использовать в будущих проектах, снова используя те же элементы и добавляя еще несколько объектов.

Вам понадобятся эти элементы Photoshop, которые я подготовил для использования в нашем каркасе.

Вот что мы создадим:

Каркас (Большой предварительный просмотр Полный макет (Большой предварительный просмотр

1.Создание каркаса, выбор и вставка ресурсов PS через библиотеки

Лучшее место для начала разработки каркаса с нуля — сначала нарисовать его вручную.

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

Первый шаг : Вот мои собственные нарисованные от руки каркасы.

Большой превьюБольшой превью

Как видите, информации о них не так много. Первое намерение — просто показать, как будет составлен макет и какие элементы следует учитывать. Чисто и просто.

Второй этап : повторно отправьте каркас в меньшем размере и с некоторыми примечаниями на полях, которые я использую для объяснения элементов и их использования:

Большой предварительный просмотр

Третий этап : Начнем создавать наш цифровой каркас с Adobe XD.

Откройте Adobe XD и в открывшемся окне выберите «Web 1920».

Большой предварительный просмотр

Сохраните проект как «Каркас», выбрав Файл → Сохранить как .

После сохранения файла создайте еще одну монтажную область для iPhone ⁶ ⁄ ₇ Plus.

Нажмите кнопку A (Artboard) слева и выберите «iPhone 6/7/8» на правой боковой панели.

Большой превьюБольшой превью

А вот и два наших артборда: один для настольного компьютера и один для мобильного.

Большой превью

Теперь мы можем приступить к созданию наших каркасных объектов. Следуя нашим наброскам, нарисованным от руки, мы теперь создадим те же объекты в XD.

Изображение героя
Выберите инструмент «Прямоугольник» ( R ) и нарисуйте фигуру там, где должно быть изображение вашего героя. Затем возьмите инструмент «Линия» ( L ) и нарисуйте две линии, соединяющие вершины. Эта форма представляет собой заполнитель нашего изображения.

Сгруппируйте формы и линии и назовите группу «Герой»:

Большой превью

Теперь продолжим с разделом «Значки».Я помещаю текст перед значками и собираюсь представить его визуально с помощью нескольких линий. Снова возьмите Line Tool ( L ) и нарисуйте одну горизонтальную линию. Щелкните инструмент «Повторить сетку» ( ⌘ + R на Mac или CTRL + R в Windows) и перетащите линию, пока у вас не получится три из них.

Нам нужно три символа для наших значков, поэтому щелкните на Ellipse Tool / E ) и нарисуйте круг. Щелкните еще раз на Repeat Grid Tool ( ⌘ + R в Mac или CTRL + R в Windows) и создайте три круга.Затем выберите пространство между кругами и перетащите его, чтобы сделать его шире.

Раздел элементов
Создайте светло-серый фон ( # F8F8F8 ) с помощью инструмента «Прямоугольник» ( R ). Повторите шаги из предыдущего раздела «Изображение героя» выше, чтобы создать заполнитель изображения, затем повторите шаги из раздела «Значки» (также выше), чтобы создать строку для текста. Наконец, создайте простую кнопку с помощью инструмента Rectangle Tool ( R ).

Это окончательный результат:

Большой предварительный просмотр

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

Сделаем это с помощью Photoshop.

Откройте предоставленный мной файл Photoshop, щелкнув по этой ссылке.

Я хочу вставить это изображение как символ с помощью Libraries CC.

В Photoshop не забудьте увидеть панель «Библиотеки», перейдя в Окно → Библиотеки . Создайте новую библиотеку, щелкнув маленький значок вверху справа (см. Изображение):

Большой предварительный просмотр

Я назвал свою библиотеку «Каркас».Не стесняйтесь давать своей библиотеке желаемое имя.

Теперь щелкните и перетащите символ, который вы хотите иметь в своей библиотеке:

Вернитесь к XD и перейдите в Файл → Откройте библиотеки CC , и вы увидите последний символ, который вы только что загрузили через Photoshop, и созданная вами библиотека.

Большой предварительный просмотр

Перетащите символ цитаты в каркас в XD и разместите его там, где вам нужно.

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

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

Следуйте шагам, описанным в разделе Feature , чтобы вставить символ в библиотеку через Photoshop, откройте его в XD и перетащите его на монтажную область каркаса.

Это результат:

Большой предварительный просмотр

Последнее, что нам нужно сделать перед тем, как продолжить, — это упорядочить наши слои. Убедитесь, что ваши слои активированы, щелкнув значок слоя ( ⌘ + Y для Mac или CTRL + Y для Windows).

Большой предварительный просмотр

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

Большой превьюБольшой превью

Мы закончили с нашим каркасом!

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

2. Добавление уровня точности к вашему каркасу

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

Мы готовы двигаться дальше и обновлять наш каркас, чтобы сделать его «живым» с изображениями, цветом и копией-заполнителем.

Создайте свой дизайн. Дублируйте свой каркас, сохранив его под другим именем (например, «Wireframe-Layout»).

Во-первых, нам понадобится изображение для раздела «Герои» (я пошел дальше и использовал это изображение Присциллы Дю Пре из Unsplash..)

Откройте изображение в Photoshop и уменьшите его размер, щелкнув Изображение → Размер изображения и установите ширину 3000 пикселей:

Большой предварительный просмотр

Сохраните изображение и перетащите его в свои библиотеки.

В XD перетащите изображение из библиотек на монтажную область. Пусть он вписывается в форму, которую мы только что создали в качестве заполнителя изображения.

Большой превью

Я собираюсь добавить логотип и текст к этому изображению; Мне нужно, чтобы изображение было немного темнее, чтобы информацию было легко читать.Вернитесь в библиотеки Photoshop и дважды щелкните изображение на панели. Когда изображение открыто, перейдите на панель «Слой», выберите слой изображения и нажмите «». Добавьте стиль слоя в нижней части панели. Установите Color Overlay с настройками, как показано ниже:

Большой предварительный просмотр

Сохраните его, и он будет автоматически сохранен во всех ваших библиотеках. Вернитесь к XD, и вы увидите обновленное изображение на монтажной области (не нужно снова перетаскивать его из библиотеки).

Примечание : В зависимости от размера образа библиотекам может потребоваться немного больше времени для обновления.

Большой превью

А теперь вставим наш логотип. Откройте файл Photoshop и перетащите «Learn!» логотип в библиотеки. Это шрифт, который я использовал.

Большой превью

Так как наш фон темный, нам понадобится белый логотип. Вернитесь в Photoshop и дважды щелкните логотип в библиотеках.

Возьмите инструмент «Текст», выделите текст логотипа и сделайте его белым.Сохраните его, и он также будет автоматически сохранен в вашем артборде XD.

Большой предварительный просмотрБольшой просмотр

Вставьте текст и кнопку, чтобы завершить раздел «Герой».

Большой превью

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

Как и раньше, откройте значки и добавьте их в свои библиотеки в Photoshop, затем вернитесь в XD, чтобы разместить их в каркасе.Вот результат:

Большой предварительный просмотр

Теперь мы перейдем к разделу Feature . Как и раньше, мы перетащим изображение на заполнитель изображения (я использовал это изображение Сонни Хайлса, найденное на Unsplash). Добавьте текст и кнопку, как я показал вам в предыдущих шагах выше.

Большой предварительный просмотр

Откройте предоставленный мной файл Photoshop и добавьте символ галочки в свои библиотеки. Откройте библиотеки в XD и поместите значок рядом с текстом. Используйте повторяющуюся сетку, чтобы сделать три ее копии:

Теперь давайте изменим цвет символа галочки.Вернитесь в Photoshop, откройте его из библиотек и задайте наложение цвета, как показано ниже:

Большой предварительный просмотр

Сохраните его и увидите, как ваши значки в XD будут обновлены напрямую.

Большой превью

Теперь закончим наш макет.

Для раздела Testimonial добавьте текст и изображение для отзыва (я взял свое из UI Faces).

Large preview

Наконец, мы добавим информацию для раздела Price , раздела Subscribe и нижнего колонтитула.Таблицы цен можно найти в предоставленном мной файле Photoshop. Перетащите их в свои библиотеки в Photoshop, затем откройте библиотеки в XD и перетащите их на монтажную область. Не стесняйтесь изменять их по своему усмотрению.

И… готово!

Заключение

В этом уроке мы узнали, как работать с Photoshop и Adobe XD для создания каркаса, а затем как быстро придать ему точность, изменив элементы библиотек. Для справки, я создал мобильный каркас, который вы можете использовать, чтобы практиковаться и следовать этому руководству.Следуйте инструкциям, которые мы делали для настольной версии, чтобы добавить текст и изображения.

Посмотрим ваш результат в комментариях!

Эта статья является частью серии UX-дизайна, спонсируемой Adobe. Инструмент Adobe XD создан для быстрого и гибкого процесса проектирования UX, поскольку он позволяет быстрее переходить от идеи к прототипу. Создавайте, создавайте прототипы и делитесь ими — все в одном приложении. Вы можете ознакомиться с другими вдохновляющими проектами, созданными с помощью Adobe XD, на Behance, а также подписаться на информационный бюллетень Adobe Experience Design, чтобы оставаться в курсе последних тенденций и идей в области дизайна UX / UI.

(il)

Photoshop против Sketch: обзор для начинающих веб-разработчиков (с инструкциями по цвету и измерению) | Мелани Филлипс

На этой неделе в HackerYou (моя первая неделя, могу добавить) я познакомился с Adobe Asset Library как с методом извлечения изображений и деталей из PSD, если Photoshop недоступен. Хотя это полезно во многих отношениях, я не считаю его достаточно интуитивным, когда дело доходит до:

Получение информации об измерениях
Получение информации о цвете

Adobe Asset Library также нельзя использовать в автономном режиме, так что для кого-то вроде меня, который тратит много времени на дорогу, это потерянное драгоценное время.

Вместо этого я решил попробовать Sketch, поскольку на моем ноутбуке установлена более старая версия, и за эти годы я слышал о ней хорошие отзывы от разработчиков. Для тех, кто также считает Photoshop подавляющим, Sketch — долгожданная альтернатива.

Я должен предисловие к этому, упомянув, что Sketch не является бесплатным, но он не сломает банк, как Photoshop. У Adobe есть отличные продукты, но они дорогие и содержат множество вещей, которые вы можете не использовать или не нуждаться как начинающий веб-разработчик.

Студенческий пакет для Photoshop (https://adobe.ly/2DxSAkg) предоставляется по подписке по цене 10 долларов США в месяц. Эта цена действительна только в течение одного года, затем она повышается. Если не платить ежемесячную плату, товар перестанет работать.

Sketch стоит 99,00 долларов США в год для обычных пользователей (http://bit.ly/2F3hl49), но на него действует ужасная скидка 50%, если вы студент. Огромным преимуществом является то, что по прошествии года у вас все еще будет программа на вашем компьютере, вы просто больше не будете получать обновления. Это также действительно хороший способ изучить слои и т. Д. В более простой среде.

Причины, по которым я люблю Sketch, восходят к тому, что я сказал выше; по нему легко ориентироваться, и он полезен при получении информации о дизайне для создания сайта. Вот два основных трюка, которые я использовал, которые сэкономили мне время (и душевную боль!) На этой неделе, которыми я хотел бы поделиться с вами.

Как получить информацию об измерениях из Sketch:

Откройте файл изображения в Sketch.
Нажмите кнопку «R», чтобы открыть инструмент для рисования прямоугольника.
Нарисуйте прямоугольник между элементами, расстояние между которыми вы пытаетесь определить. Вы также можете перемещать его и легко настраивать, когда он у вас есть. В приведенном выше примере я пытаюсь получить размер отступа между верхом
и краем его контейнера.
Взгляните на панель инструментов справа. Одна из самых первых вещей, которые он сообщает вам, — это размер созданного вами прямоугольника. В этом случае расстояние между моим
и краем контейнера составляет 95 пикселей, потому что высота прямоугольника отображается как 95.
Примечание. Если вас беспокоит точность, увеличьте масштаб (горячие клавиши Mac — это CMD и +/- в зависимости от того, хотите ли вы увеличить или уменьшить масштаб).
Вуаля! У вас есть замеры!

Как получить информацию о цвете из эскиза:

Чтобы быстро запустить инструмент цвета, снова создайте прямоугольник (см. Выше в разделе «Как получить информацию об измерениях из эскиза»), открыв свое изображение и нажав клавишу «R». Прямоугольник ничего не значит для получения цвета, кроме того, что он быстро открывает инструмент.
Далее на правой панели инструментов вы увидите маленькую рамку с надписью «цвет». Выберите это. Это откроет детали цвета. Когда он открыт, он будет выглядеть следующим образом:

3. Выберите инструмент «Пипетка», который находится чуть ниже большого поля градиента цвета (на изображении выше этого поля со всеми красными и черными цветами). Супер круто, насколько это точно. Он увеличивается и позволяет легко сфокусироваться на отдельных пикселях (см. Изображение ниже).

4. Чтобы получить информацию о цвете, посмотрите прямо под значком пипетки на панели инструментов.Он дает вам значение HEX, а также значение RGBA. В приведенном выше примере шестнадцатеричный код — # 668790 , а RGBA — rgba (102, 135, 144, 1) .

5. Уууу, у тебя есть информация о цвете!

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

Всем счастливого развития!

Как создать профессиональный логотип БЕЗ Photoshop — Курс лучшего брендинга

НО на данный момент ваша цель №1 должна заключаться в том, чтобы представить свою идею миру в самой лучшей, ПЕРВОЙ версии, которую вы можете .И это то, что должны охватывать эти основные правила.

1. Избегайте использования более двух гарнитур при создании логотипа.

Это довольно стандартное практическое правило для дизайна логотипов. Вы не хотите, чтобы ваш логотип отвлекал или казался несвязным, поэтому, ограничившись двумя хорошо сбалансированными шрифтами, вы можете гарантировать, что ваш логотип останется эффективным и универсальным. Для дальнейшего чтения по типографике и сочетанию гарнитур, мне нравится этот пост на Go Live HQ.

2.Ошибаюсь в сторону простого и разборчивого, а не умного и стилистического.

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

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

Я несколько раз совершенствовал свои продукты и услуги, трижды менял дизайн своего веб-сайта, один раз обновлял свой брендинг, и вы знаете, ЧТО ОДНО, что осталось неизменным? Мой логотип. Тот, который я разработал за 10 минут, когда я пытался запустить свой сайт три года назад. Почему? Потому что это было достаточно просто и гибко, чтобы двигаться вместе со мной по мере моего развития. И продолжает служить мне хорошо.

3. Будьте честны с собой при создании логотипа.

Ключевой момент здесь в следующем: не пытайтесь быть кем-то, кем вы не являетесь, когда дело касается ваших дизайнерских навыков. Сочетание цветов или выбор шрифтов заставляют вас немного заболеть крапивницей? ИЛИ, у вас есть противоположная проблема? Вы заблудились в кроличьей норе DIY-дизайна, потому что не знаете, когда просто РЕШИТЬ и двигаться дальше? В любом случае это нормально!

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

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

Помните, ничто не вечно, и ваша задача — просто создать то, что вам удобно и что вы можете с гордостью продвигать при запуске своего бизнеса!

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

8 причин отказаться от использования Photoshop для веб-дизайна

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

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

Что плохого в использовании Photoshop для создания веб-сайтов?

Не переводится на язык Интернета
Веб-сайты содержат множество динамических элементов: состояния, страницы, раскрывающиеся списки, переходы, анимации… список можно продолжать и продолжать.Итак, что мы получаем в фотошопе? Слои, папки, группы и смарт-объекты. Какой из них использовать для изменения состояния? А как насчет раскрывающегося списка? Могу ли я создавать все свои страницы в одном файле или в виде отдельных файлов? Могу ли я использовать для этой кнопки группу, смарт-объект или папку? А что насчет изображения заголовка? Язык, используемый в Photoshop, не переводится на язык, используемый при создании веб-сайта, и это вызывает несогласованность и путаницу между проектами.
Ужасное управление вектором
Создание векторных изображений — это необходимый навык, которым дизайнеры должны научиться для создания масштабируемых элементов, таких как графика и логотипы.И как только вы испытаете настоящий векторный рабочий процесс (с использованием такого инструмента, как Adobe Illustrator), вы удивитесь, как вы когда-либо мирились с интуитивно понятными векторными инструментами внутри Photoshop. Стандартные векторные элементы стилизованы и управляются с помощью совершенно разных подменю и диалоговых окон, и у вас очень ограниченный контроль над тем, что вы можете делать с ними без использования стилей слоя. Хотите нарисовать что-нибудь нестандартное с помощью инструмента «Перо»? Это еще один многоэтапный процесс или специальный параметр, позволяющий преобразовать инструмент «Перо» в векторную форму, а не в контур или выделение.
Ужасное Управление типографикой
Подобно тому, как изучение реального векторного рабочего процесса подчеркивает недостатки векторной графики Photoshop, работа с хорошими инструментами типографии, такими как Adobe InDesign (который поддерживает CSS-подобные панели стилей абзацев и символов для модульного редактирования), делает недостатки управления шрифтами в Photoshop чрезвычайно очевидными. С годами он стал лучше, но до сих пор нет возможности пробовать / дублировать определенные настройки типографики, ссылаться на текстовые поля или повторно использовать текстовые стили.
Ужасное управление цветом
Заметили здесь тему? Хорошая дизайнерская программа позволяет легко увидеть, какой (шестнадцатеричный) цвет был использован для какого элемента, и легко экстраполировать это на CSS для создания реального сайта. Управление цветом в Photoshop повсюду в зависимости от того, что вы используете (Стандартный слой? Векторный слой? Текст? Смарт-объект? Градиент?), И все это скрыто в отдельных диалоговых окнах, что в лучшем случае нарушает рабочий процесс и заставляет людей в худшем случае используйте альтернативные, менее точные методы выборки цвета (например, пипетку).И это даже не включая параметры стилей слоя для наложения цвета и границ!
Ужасное управление срезом / активами
Хотя это стало немного лучше с последним обновлением Creative Cloud (при условии, что вы решили перейти на модель ежемесячного лицензирования для получения последних обновлений), управление активами в Photoshop уже довольно давно отсутствует. Даже такая простая задача, как нарезка изображения для Интернета, включает посещение нескольких вторичных диалоговых окон для управления именем фрагмента, типом файла, который он будет сохранять, и тем, как он будет отображаться при экспорте.Хорошая программа для веб-дизайна позволит вам увидеть и отредактировать это встроенное.
Неэффективные обходные пути для нескольких связанных экземпляров одного элемента
Подобно тому, как хороший CSS стремится быть модульным и многоразовым, так что для внесения изменений требуется минимальное редактирование, хорошая программа веб-дизайна позволит вам повторно использовать элементы в нескольких местах, где редактирование одного элемента приведет к изменению всех из них. Photoshop может сделать это (вроде как) с помощью функции смарт-объектов, но для этого требуется, чтобы вы открывали объект в новой вкладке (или даже в другой программе Adobe), что нарушает ваш рабочий процесс, поскольку ваши изменения не выполняются встроенными.
Практически отсутствуют возможности прототипирования
Хорошая программа для веб-дизайна позволит вам быстро создать прототип рабочей версии вашего дизайна, будь то предоставление какой-либо интерактивной панели или экспорт вашего дизайна непосредственно в HTML / CSS для предварительного просмотра в браузере. Отличная программа для веб-дизайна даже экспортирует оптимизированный, интеллектуальный и соответствующий стандартам HTML / CSS (включая типографику, цвета, кнопки и т. Д.) Для использования на рабочем сайте. Photoshop ничего из этого не делает.Он вообще не может экспортировать HTML, даже табличный макет со встроенными стилями. Все, что вы получаете, — это (плохо управляемые) фрагменты статических изображений.
Не подходит для адаптивного или гибкого дизайна
Вся концепция буквального макета с идеальной точностью до пикселя подвергается сомнению в эпоху множества размеров устройств и постоянной итерации дизайна. Photoshop не содержит никаких встроенных инструментов гибкости, которые позволяют изменять размер и перекомпоновку содержимого на лету (если вы не интегрируете его внешне с Adobe Reflow).Но даже если вы не озабочены созданием полностью адаптивного макета внутри своей дизайнерской программы, тот факт, что это многоэтапный процесс экспорта пригодного для использования контента из Photoshop, делает его паршивым для любого быстрого или гибкого процесса проектирования.

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

(обновление от января 2016 г., чтобы предоставить более новые альтернативы)

Эскиз

Это новое приложение, предназначенное только для Mac, специально предназначено для веб-интерфейсов и цифровых интерфейсов пользовательского интерфейса.Он быстро принимается сообществом цифрового дизайна из-за его способности создавать что угодно, от быстрых каркасов до полных макетов. Как и некоторые из предшествующих программ, он сочетает в себе лучшее из векторного управления с растровой графикой и поставляется с множеством инструментов, специфичных для веб-дизайна (например, отличным наполнителем для макетов). Он хорошо сочетает язык Интернета с языком, который вы ожидаете от инструмента дизайна, и кривая обучения не будет слишком крутой, если вы раньше работали с чем-то вроде Fireworks или Illustrator.Если у вас Mac, я настоятельно рекомендую их попробовать.

Adobe Fireworks

Бывшее приобретение Macromedia, эта программа веб-прототипирования была золотым стандартом в веб-дизайне в течение нескольких лет. В нем было практически все, что вам может понадобиться — отличные векторные элементы управления и типографика, встроенное управление фрагментами, возможность добавлять состояния и страницы в дополнение к слоям, многоразовые символы и главные элементы для модульного дизайна, возможность предварительного просмотра ваших интерактивных элементов, а также экспорт в (табличный) HTML для прототипирования.К сожалению, Adobe никогда не отдавала приоритет Fireworks в своих циклах разработки, поэтому он оставался неизменным (не говоря уже о небольшом количестве ошибок) до начала этого года, когда они объявили, что полностью прекращают дальнейшую разработку программы. При этом на момент написания этой статьи это все еще самая полная альтернатива Photoshop. (Обновление: я бы сказал, что Sketch заменил это сейчас)

Ара

Обновление: Macaw только что приобрела InVision, компания, которая делает отличные инструменты для создания прототипов. как программа семантического веб-дизайна и прототипирования с полностью адаптивным холстом.Почему это так интересно? Две причины: поощрение семантического подхода к организации ресурсов веб-дизайна (имена слоев и групп становятся именами классов CSS) и способность программы принимать все более разумные решения CSS по мере того, как она узнает больше о вашем проекте. Хотите узнать больше? Пойдите, проверьте их! Или верните их на Kickstarter!

Google Web Designer

Это только что запущенная бета-версия Google (представленная ранее на этой неделе) представляет собой приложение HTML5 с похожим графическим интерфейсом в стиле Photoshop, где то, что вы разрабатываете, преобразуется в выходной код.Это приложение, похоже, специально разработано для создания анимации и создания рекламы, включая баннеры, межстраничные объявления и расширяемую рекламу.

А ты? Используете ли вы альтернативные инструменты проектирования или будете вырывать эти PSD из ваших холодных мертвых рук?

Adobe XD против Photoshop: обзор веб-дизайна

Вот вам горячая идея, связанная с веб-разработкой и дизайном: Adobe XD запускает круги вокруг Adobe Photoshop . Ладно, я немного опаздываю на эту тему, так что, может быть, это в лучшем случае скорее холодный взгляд.Я перешел на Adobe XD для всего, что связано с веб-дизайном, со второй половины 2017 года, и после того, как я использую его чуть более восьми месяцев, я считаю, что это достаточно хороший размер выборки, чтобы сказать, что он полностью изменил мой рабочий процесс.

Я виноват — я пил сок XD, и пока он вкусный. Шумиха реальна.

Я уверен, что некоторые из вас, дизайнеры и разработчики, говорят: «Ого, ой, ой, Райан, давай, мужик. Вы когда-нибудь пробовали [вставить сюда ваше любимое дизайнерское приложение]? » Теперь я понимаю, что существует множество дизайнерских платформ, из которых можно выбирать, одни по праву лучше других.Я скажу вам прямо сейчас, что основная причина, по которой я использую XD, — это фактор удобства (который мы обсудим более подробно чуть позже).

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

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

Короче говоря, эти другие варианты мне не подошли по разным причинам. Так было до тех пор, пока не был запущен XD, который вышел из стадии бета-тестирования и был включен в мой пакет Adobe CC. С первого дня его официального запуска я неукоснительно использовал XD для своих дизайнов и с тех пор не оглядывался назад.

Разбивка приложений

И Photoshop, и XD — это всего лишь два детища, включенные в изысканно созданный набор приложений и экосистему Adobe, созданную креативщиками и для них.Photoshop — это OG в дизайнерской игре, дебютировавшая в 1990 году и с тех пор являющаяся оплотом дизайнеров. Как следует из названия, основная цель программы — редактирование фотографий, обработка фотографий и создание изображений.

С другой стороны,
XD (сокращение от «Experience Design») — это новое дополнение к пакету Creative Cloud, разработанное под пристальным вниманием команды Adobe «Project Comet». Весной 2016 года программа была переведена в бета-версию, а официально запущена осенью 2017 года.XD в основном используется для UX / UI и веб-дизайна, а также для создания прототипов.
Не секрет, что наша экранная жизнь становится все более мобильной.
Из-за этого дизайнерам понадобился инструмент, который мог бы идти в ногу с постоянно изменчивым цифровым миром, в котором мы живем. Вот почему Adobe разработала XD, и теперь для некоторых дизайнеров, включая меня, она стала новинкой.
Итак, почему XD вместо Photoshop ?:
Для меня нет ничего более верного, чем цитата великого философа дизайна Типака Шакерна (безусловно, лучший каламбур, связанный с дизайном, который я когда-либо создавал — пожалуйста), однажды сказал: «Я не выбирал XD life, жизнь XD выбрала меня.«В каком-то смысле XD просто упал мне на колени. Это было приложение, которое скрывалось у всех на виду; часть моей учетной записи Creative Cloud, на которую я как бы никогда особо не обращал внимания, пока меня не поглотила потребность искать другие варианты платформы дизайна. Немного терпения и несколько уроков на YouTube позже, я смог разобраться в вещах. В конце концов, новое приложение на блоке стало новым выбором.
Причина № 1: Комфорт и удобство
программ Adobe, в частности Photoshop и Illustrator (а теперь и XD), для меня почти вторая натура просто потому, что они: а) программы, с которыми я начал работать с того времени, когда у меня возник интерес ко всему дизайну, и б) промышленный стандарт.О комфорте можно много сказать, и Adobe XD дает мне это. Возьмем, к примеру, быстрые клавиши. Вам не нужно , чтобы использовать их, но давайте оставим их здесь целую сотню. Они значительно ускоряют ваш рабочий процесс, и когда вы привыкнете к ним, вам будет трудно преодолеть кривую обучения, пытаясь пробовать что-то новое. Когда я какое-то время пытался использовать Sketch для работы, мне потребовалось время, чтобы привыкнуть.
Для XD этого было не так много, поскольку многие ярлыки, используемые в Photoshop и Illustrator, одинаковы в XD, и это довольно большая проблема.
Также следует отметить, что он включен в вашу учетную запись Adobe CC, поэтому отметьте здесь фактор удобства Adobe XD. Недавно они изменили свой тарифный план, чтобы предоставить стартовый пакет XD бесплатно, и если это не значит, что это удобно, то я не знаю, что это такое.
Причина № 2: Оптимизация для дизайна веб-страниц и приложений
Adobe XD также имеет преимущество более простого интерфейса и простоты использования по сравнению с Photoshop. Поскольку Adobe XD был сконструирован и разработан с учетом того, что его следует использовать для дизайна экрана, вы быстро заметите, что интерфейс очень минимален по сравнению с большим количеством инструментов, панелей и конфигураций Photoshop.Теперь все навороты, которые предлагает Photoshop, — это здорово, но большинство из этих функций не нужны и непрактичны при разработке для веб-сайтов и приложений.
Что касается функций, которыми обладает Adobe XD (по состоянию на июль 2018 г.), есть несколько отличных, которые заслуживают признания:
Это векторная платформа , которая упрощает процесс редактирования логотипов и значков SVG.
Сторонняя интеграция больше похожа на дополнительный бонус.Как бы ни был хорош XD, есть некоторые аспекты, которые приложение не может делать (по крайней мере, пока). Интеграция экспорта Zeplin настолько проста, насколько это возможно, и это ключевая платформа, которую наша команда использует при переходе от проектирования к разработке.
Панель ресурсов чрезвычайно удобна и также может быть включена в раздел «Удобство» в Причине №1. Возможность сохранять цвета, стили символов и символы позволяет мне создавать руководство по стилю в рамках проекта и сохранять согласованность.
(Источник)
Повторяющаяся сетка меняет правила игры. Хотя я, вероятно, экономлю минуты в своем рабочем процессе, мне кажется, что я экономлю целую вечность, используя этот инструмент. Я могу быстро повторять элементы на монтажной области с помощью нескольких щелчков мышью и перетаскивания, сохраняя при этом гибкость в регулировке интервала.
(Источник)
Фиксированные элементы — довольно новое дополнение к репертуару XD, которое появилось давно.Несколько пользователей XD (5 573, если быть точным) умоляли Adobe реализовать эту функцию, и, наконец, она пришла к нам в обновлении за июнь 2018 года. Из нескольких упомянутых мною функций это, вероятно, та, от которой я бы не хотел отказываться.

Причина № 3: Встроенное прототипирование Я считаю, что миссия
Adobe XD состоит в том, чтобы создать универсальную платформу, которую дизайнеры могли бы использовать для создания веб-сайтов и приложений. Я бы сказал, что с включением встроенной интеграции бесшовного прототипирования Adobe определенно движется в правильном направлении.Прототипирование — ключевой элемент проекта веб-сайта, который приносит пользу всем участвующим сторонам — от разработчиков (которые будут создавать сайт) до клиентов (чей веб-сайт будет затронут дизайном) и дизайнеров (которые те, которые будут получать обратную связь от клиента и передавать проект разработчику). Это помогает проиллюстрировать, как сайт в конечном итоге будет выглядеть для клиента, и в конечном итоге позволяет каждому с обеих сторон согласовать конечный продукт.
(Источник)
Заключительные мысли
Несмотря на то, что Adobe XD — новое приложение на конкурентном рынке, знание того, что оно создается под крылом Adobe, вселяет в меня уверенность в том, что это будет моя предпочтительная платформа для веб-дизайна в ближайшие годы. Благодаря интеграции со сторонними производителями, ежемесячным обновлениям приложений по запросу клиентов, функциям прототипирования и легкости использования, Adobe XD превзошел Photoshop, когда дело доходит до веб-дизайна, на мой взгляд.
Создайте простую и стильную форму входа в систему с помощью Photoshop
Создание макетов веб-сайтов и веб-форм — отличный способ изучить Photoshop.Сегодня менее чем за 10 шагов я покажу вам, как создать современную форму входа в систему с помощью Photoshop. Попутно мы будем использовать параметры наложения и будем создавать тени и свет. В конце вы получите чистую форму входа в систему, готовую к написанию.
Что мы делаем сегодня:
Шаг 1. Настройка холста
Откройте Photoshop, создайте новый файл холста размером 600×400 пикселей и залейте его серым цветом.
Шаг 2: Создание формы веб-формы
Теперь выберите инструмент Rounded Rectangle Tool (U) и с радиусом 4px нарисуйте прямоугольник 280x180px.Размер должен быть достаточным для стандартной формы входа.
Шаг 3. Стилизация фона веб-формы
К созданному прямоугольнику добавьте некоторые параметры смешивания, такие как Gradient Overlay и несколько теней.
Форма должна выглядеть так:
Шаг 4: Сделаем форму сияющей
Теперь мы добавим отражения в форму входа. Итак, выберите Line Tool (U), выберите Weight = 1px и нарисуйте горизонтальную линию вверху формы.
Теперь добавьте к линии следующий градиент:
У вас должна получиться такая линия:
Дублируйте слой линии и перетащите его в нижнюю часть формы.
Добавим еще вертикальные линии. Как вы сделали выше, нарисуйте 2 вертикальные линии для левой и правой стороны, но на этот раз добавьте их следующим градиентом.
Результат не очень заметен, но важны детали. Форма должна выглядеть так:
Шаг 5: Создайте поля ввода
Выберите инструмент Rounded Rectangle Tool (U) и нарисуйте прямоугольник с радиусом 7 пикселей.
Давайте немного стилизуем его. Добавьте к нему следующие параметры наложения:
Поле ввода теперь выглядит красиво:
Я покажу вам, как добавить красивую тень в поле ввода. Выберите инструмент Rounded Rectangle Tool (U) и с радиусом 10 пикселей нарисуйте черный прямоугольник и поместите его под слоем поля ввода, как на изображении ниже.
Теперь добавьте к нему размытие по Гауссу 4 пикселя (Фильтр-> Размытие-> Размытие по Гауссу) и уменьшите непрозрачность слоя до 30%.У вас должна получиться красивая тень:
Создайте другое поле ввода, продублировав слои, которые создают первое поле ввода, и перетащите их ниже.
Шаг 6: Рисование кнопки «Отправить»
Снова выберите инструмент Rounded Rectangle Tool и нарисуйте красивую форму под полями ввода. Добавьте красивый и чистый градиент от серого к черному.
Хорошо, что у нас есть до сих пор: красивое окно входа в систему с двумя красивыми полями ввода и чистой кнопкой отправки.

Как нарисовать сайт в фотошопе: Разработка макета веб-сайта и веб-графики в Adobe Illustrator

Figma VS Photoshop: что лучше для работы веб-дизайнера?

В чем плюсы программы Photoshop?

Идеальна для работы с растровой графики

Позволяет создавать сложные, креативные макеты

Более привычная и для заказчиков, и для разработчиков

В чем минусы Photoshop?

Сложность в изучение

Неудобно работать с векторной графикой

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

В чем плюсы программы Figma?

Есть возможность работать над макетом коллективно

Можно обойтись без установки на ПК

Функция «Компоненты»

Удобно работать с векторной графикой

В чем минусы Figma?

Без версии на ПК и без интернета нельзя ничего делать

Подходит только для сайтов с простым дизайном

30 суперполезных сайтов для любителей рисовать в фотошопе

Кисти и шрифты для фотошопа

Градиенты и текстуры

Уроки фотошопа

Почему UI-специалисты отказываются от Photoshop и переходят на Sketch — Офтоп на vc.ru

Появление Sketch

Sketch

Переход на Sketch

Отказ от Photoshop

Графика для Web — как подготовить изображение в Фотошопе и вставить картинку или фото на сайт

Создание изображения для сайта в Photoshop

Добавляем слои и переносим их на наше изображение

Добавление текста или логотипа на изображение в Photoshop

Рамка КАДРИРОВАНИЯ

Окно ИСТОРИЯ

Как добавить стиль слоя в Фотошопе

Сохранение изображения для Web

Как вставить созданную картинку на сайт

Секреты favicon.ico или как создать иконку для сайта в Photoshop — Da Diego

Как сделать рекламный баннер в Фотошопе для сайта

Что нужно знать

Формат шрифтов

Работа с фоном

Симметрия объектов

Как создать Mockup упаковку в Photoshop – PhotoDrum.com – сайт дизайнера

Создание и настройка документа

Рисуем коробку

Создаем оформление коробки

Дополнительные детали

Похожие уроки и статьи

50 лучших уроков по интерфейсу веб-сайта по Photoshop

100 лучших руководств по текстовым эффектам в Photoshop

Как ускорить процесс создания каркасов с помощью Photoshop и Adobe XD — Smashing Magazine

Об авторе

1.Создание каркаса, выбор и вставка ресурсов PS через библиотеки

2. Добавление уровня точности к вашему каркасу

Заключение

Photoshop против Sketch: обзор для начинающих веб-разработчиков (с инструкциями по цвету и измерению) | Мелани Филлипс

и краем его контейнера.

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

Как создать профессиональный логотип БЕЗ Photoshop — Курс лучшего брендинга

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

8 причин отказаться от использования Photoshop для веб-дизайна

Не переводится на язык Интернета

Ужасное управление вектором

Ужасное Управление типографикой

Ужасное управление цветом

Ужасное управление срезом / активами

Неэффективные обходные пути для нескольких связанных экземпляров одного элемента

Практически отсутствуют возможности прототипирования

Не подходит для адаптивного или гибкого дизайна

Эскиз

Adobe Fireworks

Ара

Google Web Designer

Adobe XD против Photoshop: обзор веб-дизайна

Разбивка приложений

Итак, почему XD вместо Photoshop ?:

Причина № 1: Комфорт и удобство

Причина № 2: Оптимизация для дизайна веб-страниц и приложений

Заключительные мысли

Создайте простую и стильную форму входа в систему с помощью Photoshop