Копировать css в фотошопе что это
Как получить CSS тень из Photoshop?
В данной статье будут рассмотрены простые и быстрые способы как получить CSS тень из PSD макета сайта.
В качестве примера из сети был взят простой PSD шаблон. В конце статьи вы найдете ссылку для скачивания макета.
В данном макете можно сразу увидеть тень в блоке с карточкой товара. Для данного блока мы и будем пытаться получить CSS стиль тени.
Способ 1. Копировать CSS стили из Photoshop
Данный способ очень банальный и самый простой из всех. Однако не все про него знают. Отмечу, что данный способ работает только в новой версии Photoshop CC.
Итак, для того, чтобы копировать CSS из Photoshop нужно выбрать слой с тенью, затем кликнуть по нему правой кнопкой мыши и выбрать пункт Копировать CSS.
После того, как CSS код был скопирован, его можно вставлять в редактор. Код будет примерно следующего вида:
Здесь нас интересуют только свойство тени:
Достаточно просто, правда? Но к сожалению данный метод не всегда корректно копирует CSS стили и может возникнуть ситуация, что тень в макете и в верстке значительно отличается. К счастью, такое случается достаточно редко, но если все же случилось, то следует воспользоваться другими способами.
Способ 2. Онлайн конвертер Photoshop тени в CSS
Суть данного способа заключается в том, что мы получаем параметры тени Photoshop и с помощью онлайн конвертера переводим их в CSS стили.
Чтобы получить параметры тени нужно выбрать слой с тенью, кликнуть по нему правой кнопкой мыши, выбрать Параметры наложения.
Откроется окно со всеми параметрами наложения для выбранного слоя, галочками отмечены активные параметры. Нас интересует только тень, поэтому открываем параметры тени.
Открываем сайт онлайн конвертера http://www.melanieceraso.com/psd-to-css3/ и задаем параметры из Photoshop.
Color — цвет в RGB.
Opacity — непрозрачность
Angel — угол
Distance — смещение
Spread — размах
Size — размер
После того, как мы задали все параметры, нажимаем на кнопку Convert to CSS3 и получаем CSS для тени.
В данном случае CSS получился точно таким же как и в первом способе:
Способ 3. Онлайн генератор CSS тени
Бывают случаи, когда из Photoshop невозможно получить параметры тени. Например, когда блок с тенью, является цельной картинкой.
Необходимо вручную подбирать CSS свойства тени. Опытные верстальщики могут на глаз определить необходимые параметры. Но существует более простой способ подбора CSS с помощью онлайн генератора CSS тени.
Я использую этот сервис: https://css3gen.com/box-shadow/. Вы можете использовать любой другой, принцип везде одинаковый: с помощью элементов управления добиться тени максимально похожей на тень в макете.
Получился примерно такой результат:
Как видно, получившиеся CSS стили отличаются от тех, которые были получены с помощью предыдущих способов:
Подобная ситуация встречается крайне редко. Но нужно быть готовым ко всему.
CSS Hat: волшебная кнопка, превращающая стили в Photoshop в CSS-код
Преобразование дизайна из Photoshop в веб-страницу всего за один клик – это не совсем свежая идея. Как только появились веб-дизайнеры, появилась и эта идея-мечта. Сегодня мы хотим рассказать вам об одном инструменте, который эту самую мечту, можно сказать, исполняет – поговорим о CSS Hat.
CSS Hat отличается от других приложений, которые вы могли видеть ранее. Это приложение не представляет собой полноценный WYSIWYG, направленный на то, чтобы вы могли создавать веб-сайты, не написав и строчки кода. Это приложение скорее направлено на возможность быстрого создания CSS3-стилей для конкретных элементов, используя процесс, который был популярен с десяток лет назад (а то и больше) прямо в Photoshop. Приложение великолепное! Действительно хорошее. Стоит того, чтобы продолжить чтение.
Встречайте CSS Hat
Давайте поговорим о том, что же такое CSS Hat, и чем это приложение не является. Прежде всего, это приложение не работает отдельно. Оно представляет собой плагин для Photoshop. И это не один из громоздких масштабных плагинов для Photoshop, а всего лишь маленькая простенькая панель, которая в большинстве своем основана на тексте.
Это означает то, что курс обучения совсем коротенький и, в принципе, если вы умеете работать в Photoshop, то этого плагина для вас, можно сказать, как будто не существует.
Хитрость, продуманная в CSS Hat, заключается в возможности осмотреть слой в Photoshop, проанализировать его различные характеристики, а затем попробовать повторить эти характеристики с помощью чистого кода CSS. Очевидно, что плагин не сможет продублировать всё до последнего, но диапазон способностей очень впечатляет, и наверняка ответит вашим требованиям. Давайте рассмотрим некоторые вещи, с которыми плагин может справиться:
* Стили слоев: здесь, на самом деле, огромное преимущество. Большинство стилей слоев в Photoshop могут быть безошибочно преобразованы в CSS (не все, но многие). Некоторые примеры поддерживаемых стилей включают тени, свечения, а также заливку градациями.
* Закругленные углы: если вы рисуете векторную фигуру с закругленными углами, в полученном CSS-коде они будут реализованы посредством параметра border-radius.
* Цвет фона и уровень плотности отображения: залейте фигуру цветом, и он будет использован в коде CSS.
* Стилизация текста: не так быстро. Вероятно, эта функция вскоре будет доработана, но пока что она поддерживается не до конца. Стили слоев, заливка и прочее все же будут работать, но не со всеми параметрами, связанными со шрифтом.
Но я на дух не переношу WYSIWYG!
Мы знаем, что мало кому нравится Dreamweaver и другие приложения, которые пытаются занизить важность работы с кодом при разработке веб-сайта. Мы тоже не любим всё это. Мы разрабатываем сайты собственными руками, и наслаждаемся этим процессом. Поэтому не нужно думать, что мы склоняем вас к образу разработки веб-сайтов, который приведет вас к деградации.
CSS Hat нельзя называть спасательным кругом для тех, кто не любит писать код, и при этом хочет создавать великолепные веб-сайты. Как раз наоборот, CSS Hat – инструмент для кодеров. Если вы будете использовать этот инструмент эффективно, то вам понадобятся сильные знания CSS: что возможно, как это сделать, и как различные параметры ведут себя в различных браузерах.
Конечно же, CSS Hat может сильно помочь вам в разработке кода, но в целом, инструмент снабдит вас всего лишь маленьким кусочком огромного паззла под названием веб-сайт. И только от вас зависит то, насколько правильно вы этот кусочек разместите.
Так о чем беспокоиться? Хороший вопрос. Нам кажется, что ответ кроется в неоспоримом факте того, что CSS3, учитывая все возможности, чрезмерно громоздкий! Необходимо писать много кода, чтобы получить даже простенький результат, и если вы можете использовать инструмент, который поможет сэкономить время, затрачиваемое на разработке кода, то почему бы не сделать это?
Мы всегда крайне скептически относимся к инструментам такого плана, но после просмотра некоторых примеров, сгенерированных CSS Hat, мы не могли не попробовать. Для начала давайте создадим простую кнопку в Photoshop, и посмотрим, как CSS Hat справится с заданием.
Здесь процесс практически такой же, как если бы вы разрабатывали простую кнопку в Photoshop. Начнем с того, что нарисуем блок с закругленными углами 10 пикселей по радиусу.
Далее мы добавляем наложение градации, начиная от цвета #009ced и заканчивая #0065bd.
Теперь нам нужно сделать внутреннюю тень для того, чтобы верхняя часть кнопки немного выделялась.
Давайте здесь немного ускорим процесс и перейдем сразу к готовой кнопке. В целом, мы добавили затемненное внутреннее свечение (выглядит больше как внутренняя тень), контур толщиной в 1 пиксель, а также тень. Учитывайте, что хотя объяснения и занимают какое-то время, при работе в Photoshop у вас уйдет не более минуты.
Вперед, гаджет CSS Hat!
Теперь, когда у нас есть необходимая кнопка, все что нам осталось сделать, это открыть панель CSS Hat, и обнаружить там большую пачку кода, который можно просто скопировать.
Перед тем, как мы отправимся проверять, как это все выглядит в браузере, давайте немного подкорректируем результат. В нижней части вы можете видеть 5 кнопок. Первая копирует код в буфер обмена, а остальные 4 – это опции, которые вы можете включить или выключить:
* Добавлять комментарии, объясняющие предназначение каждой строки.
* Генерировать CSS с браузерными префиксами (где это необходимо).
* Добавлять параметры ширины и высоты выделенного слоя.
* Оборачивать CSS в правило с названием, повторяющим название слоя.
Для большего удобства мы включим все 4 опции и назовем слой «.button». Теперь давайте перейдем в редактор кода, и вставим туда полученный код:
Наступает момент истины. Как выглядит демо в сравнении с версией в Photoshop. Итак:
Как вы уже заметили, они выглядят не совсем идентично. Тем не менее, во многом результаты очень схожи, и во многих случаях CSS-версия выглядит даже лучше. Мы считаем, что это даже улучшенная версия того, что было сделано в Photoshop!
Есть некоторые моменты, о которых вам следует знать. Некоторые аспекты стилей Photoshop просто не могут быть преобразованы в CSS на данный момент. Например, Photoshop по умолчанию добавляет режим смешивания Multiply к теням, но это нельзя перенести в CSS-код.
Зато здесь есть множество различных возможностей, которые мы можете использовать для облегчения задачи, а остальное можно дописать руками. Веб-сайт CSS Hat демонстрирует нам действительно впечатляющие примеры, которые были сделаны при помощи данного инструмента. Например, ниже вы можете видеть работу от musHo.
Мы уже примерно знаем, что многие из вас сейчас думают, поэтому давайте решим этот вопрос до того, как посыпались гневные комментарии. Отчетливый недостаток приведенных выше примеров заключается в том, что их код очень громоздкий. Тем не менее, это не проблема CSS Hat как минимум, так как код, который нам выдает инструмент, очень хорошо организован и максимально ясен.
Правда в том, что если вам захочется использовать изображения для создания эффектов такого типа, то вы без труда сможете воспользоваться данным методом. В нашем сегодняшнем мире, где весь контент нужно сжимать и расширять (из-за разных размеров экранов), нам следует разрабатывать страницы исключительно посредством кода, чтобы не было проблем с искажением контента.
Для того чтобы сделать это, мы обращаемся за помощью к CSS3, что позволяет нам обойти эту проблему, но приводит к проблемы использования этих огромных полотен CSS-кода и браузерных префиксов. Когда вы смотрите на огромные отрывки кода, приведенные выше, то ваша реакция вызвана общей ситуацией в веб-дизайне, а не работой инструмента.
Можно выделить большой минус всех инструментов вроде CSS Hat – они запросто приводят к тому, что люди забывают, что на самом деле работают с кодом! Когда вы пишете код вручную, вы гораздо больше соображаете и думаете о результате. Старайтесь всегда проверять результаты, если вы работаете с генераторами кода, так как порой это может привести к неприятным последствиям.
Что вы думаете по поводу CSS Hat?
После тщательного тестирования, мы убедились в том, насколько просто CSS Hat генерирует валидный и красивый CSS-код при помощи Photoshop. Мечта многих дизайнеров стала реальностью, и нам кажется, что инструмент имеет право быть и развиваться.
Если вы много работаете над CSS3-стилями, и при этом любите пользоваться Photoshop, то вам обязательно стоит попробовать данный инструмент. Сейчас он стоит всего 20$, что кажется даже большой суммой. Но стоит учитывать ту вероятность, что если данная функция появится от разработчиков Photoshop, то придется выкладывать за нее сотни долларов.
Теперь, когда мы рассказали вам всю имеющуюся информацию, пришло время вам поделиться своим мнением. Действительно ли современным веб-дизайнерам и разработчикам следует обратить внимание на данный инструмент?
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:
Быстрое прототипирование в Photoshop CC
Узнайте, как быстро и легко создавать макеты сайтов с помощью инструментов Photoshop CC.
Вы можете не поверить, но Adobe Photoshop — это отличный инструмент для быстрого прототипирования. С каждой новой версией программа открывает все больше возможностей для веб-дизайнеров, желающих быстро создавать макеты сайтов для совместного использования с клиентом или дизайн для разработчиков.
Самые полезные функции быстрого прототипирования в Photoshop CC включают в себя возможность изолировать слои, изменять углы в любой момент с помощью инструмента Rounded Rectangle и копировать атрибуты CSS из отдельных слоев. Кроме того, Creative Cloud предоставляет полезные элементы совместной работы.
В этом руководстве рассматриваются общие методы прототипирования с использованием широкого спектра инструментов Photoshop для создания макетов страниц удобных для разработчиков и клиентов.
01. Использование GuideGuide
Настройте документ под размеры экрана, для которого вы делаете дизайн (смартфон, планшет и т. д.). Затем создайте сетку, которая будет формировать базовую структуру — для этого полезно использовать бесплатное расширение GuideGuide. Откройте расширение, введите ширину полей, количество столбцов и отступы между столбцами. Нажмите кнопку GG и вы получите вашу сетку.
02. Определение областей
На этом этапе полезно разметить ключевые области вашего макета страницы. Создайте папки для “шапки”, “подвала”, контента и всего, что вам нужно. Было бы неплохо определить все основные области дизайна сайта — начните со светло-серого прямоугольника, чтобы наметить границы. Здесь я использовал инструмент Rectangle чтобы наметить область “шапки” сайта (1200 x 240 пикселей) и добавил заголовок.
03. Время навигации
Теперь добавьте элементы навигации. Чтобы дублировать ваш текст, выберите слой, удерживайте клавишу Opt / Alt и перетащите. Для перетаскивания по прямой, удерживаете клавишу Shift. Выровняйте текстовые слои, выбрав весь текст навигации и нажав кнопку Distribute Vertical Centres на панели Tool Options. Это поможет создать идеальные пункты меню, благодаря вертикальному выравниванию и равномерному размещению ваших слоев, как показано выше.
04. Прямоугольники со скругленными углами
Здесь мы добавляем форму для регистрации в макет страницы, используя инструмент Rounded Rectangle. Данный инструмент позволяет изменить радиус угла фигуры в любой момент. Это означает, что вы можете вернуться и изменить углы позднее, если ваш дизайн потребует этого. Данная функция может показаться незначительной, но она очень полезна.
05. Добавление изображений
Вам стоит конвертировать изображения в смарт-объекты, так как это облегчает их обновление или замену. Вы можете использовать свои прямоугольники-заполнители как векторные маски для изображений. Либо добавьте изображение как новый слой, дублируйте маску прямоугольника и привяжите его к этому слою, либо сделайте выделение из прямоугольника и используйте Paste Special>Paste Into.
06. Стили слоев и тени
Стили слоев являются достойным способом добавления эффектов. Чтобы применить текущий стиль слоя к другому слою в стеке, нажмите Opt / Alt и перетащите значок FX на новый слой. Чтобы создать слой, появляющийся при наведении мыши, который можно включить или отключить, просто продублируйте фоновый прямоугольник и сгруппируйте этот слой и текстовый слой в группу слоев.
07. Изолирование слоев
Это еще одна полезная функция в Photoshop CC, если вы хотите редактировать только некоторые из ваших слоев. Выберите слои, которые вы хотите отредактировать, а затем перейдите к Select>Isolate Layers. Это позволяет сосредоточить внимание на конкретных областях, с которыми необходимо работать, без загромождения другими слоями.
08. Adobe Generator
Adobe Generator — это функция Photoshop CC, которая позволяет автоматически создавать графические ресурсы. Перейдите к File>Generate>Image Assets. Теперь на панели Layers добавьте расширение файла, например .png или .jpeg, к названиям нужных слоёв, чтобы автоматически экспортировать слой в папку рядом с PSD-файлом. Здесь мы сделали это с иконкой файла.
09. Копирование атрибутов CSS
Возможность копировать CSS-стили слоя — это отличная функция Photoshop CC для создания HTML-прототипа. Для этого нажмите Ctrl и кликните правой кнопкой мыши на нужном слое, далее нажмите Copy CSS Style, чтобы скопировать код в буфер обмена. Откройте новый документ в Dreamweaver, Muse или Edge Code CC и вставьте свой код CSS.
Эта статья первоначально появилась в 226 выпуске журнала Computer Arts.
Обновление Adobe XD август 2019. Панель плагинов, интеграция с Photoshop, возможность копировать CSS
Adobe XD – это живая, дышащая платформа для дизайнеров, позволяющая создавать удивительные впечатления, и она постоянно развивается, чтобы поддерживать творческий рабочий процесс пользователей. В этом месяце, в обновлении Adobe XD, мы представляем совершенно новый способ использования плагинов с новой панелью плагинов, улучшая интеграцию между XD и Photoshop, и вводим автоматически генерируемый код CSS в спецификациях проекта, которые разработчики могут копировать и вставлять в их код. Мы также внесли некоторые ключевые улучшения в компоненты.
Панель плагинов
Плагины являются важной частью платформы XD и помогают разработчикам расширять функционал XD; они добавляют новые функции, подключают XD к другим приложениям и ускоряют и повышают эффективность вашего общего рабочего процесса в XD. В настоящее время в XD Plugin Manager доступно около 200 плагинов, и благодаря новой панели плагинов стало намного проще использовать их возможности. Панель плагинов – это новый раздел в XD, где вы можете запускать и использовать ваши любимые плагины.
Мы тесно сотрудничаем с сообществом разработчиков плагинов XD и рады представить несколько новых плагинов для XD, оптимизированных для Plugins Panel (панели плагинов). Вы можете узнать больше о новой Panel и увидеть некоторые из плагинов в действии в нашем полном посте «Put the Power of Plugins at Your Fingertips».
Если вы являетесь разработчиком плагинов XD, Plugins Panel представляет совершенно новую область работы для вашего плагина, в отличие от любой другой платформы дизайна, где вы можете предлагать функции вашего плагина и предоставлять новые функциональные возможности дизайнерам. Вы можете узнать больше о создании плагинов на нашем сайте для разработчиков. Вы также можете ознакомиться с руководством для начинающих по созданию плагинов XD в нашем блоге для разработчиков.
Открывайте и редактируйте изображения с помощью Photoshop, прямо из XD
Adobe XD является единственной платформой, которая изначально интегрируется с другими приложениями Creative Cloud, а ее использование вместе с Adobe Photoshop позволяет легко создавать, редактировать и импортировать изображения в прототипы XD. Теперь, благодаря улучшенной интеграции с Photoshop, вы можете использовать все возможности инструмента для редактирования изображений прямо из XD.
Как мы видим в видео выше, теперь вы можете щелкнуть правой кнопкой мыши на изображение в дизайне XD и нажать «Редактировать в Photoshop». Это автоматически откроет слой изображения, по которому вы щелкнули, в новом документе Photoshop (и если у вас Photoshop не открыт, он откроет программу за вас). Это позволяет плавно редактировать и изменять изображение в Photoshop, затем нажимаете кнопку «Сохранить», чтобы автоматически выровнять изображение и поместить отредактированную версию обратно в XD. Конечно, если вы передумаете, вы можете отменить эти изменения в Photoshop и просто нажать «Сохранить», чтобы вернуть изображение в его первоначальный вид.
Копируйте и вставляйте фрагменты кода CSS
Крутой особенностью рабочего процесса Adobe XD является возможность создавать прототипы интерактивных пользовательских интерфейсов с эффектом погружения, а затем делиться ими с разработчиками, чтобы превращать проекты в реальные продукты. В этом выпуске XD мы поработали над улучшением этого процесса. Теперь можно автоматически генерировать фрагменты кода CSS для ваших проектов, которые разработчики могут копировать и вставлять в свой код.
Вы в точности можете увидеть, как это выглядит на видео выше. При просмотре артефакта Design Spec теперь вы увидите панель CSS в нижнем правом углу, отображающую фрагменты кода CSS для выбранных элементов на монтажной панели, и вы можете копировать и вставлять эти фрагменты. Имейте в виду, код CSS является динамическим; например, если вы измените цветовой формат своего дизайна, код CSS автоматически обновится. Итак, после того, как все варианты дизайна установлены, все, что вам нужно сделать, это щелкнуть и перетащить код на панели CSS, чтобы скопировать его в буфер обмена в окончательном виде. Автоматически сгенерированные фрагменты кода CSS фиксируют цвет, тени и градиенты.
Улучшены границы для компонентов
Adobe XD помогает дизайнерам работать быстрее при создании приложений с компонентами. Компоненты, представленные в выпуске за май 2019 года, являются элементами дизайна, которые можно повторно использовать в своих проектах вместо создания одних и тех же объектов снова и снова. В последнем выпуске мы изменили свойства компонентов в XD, чтобы улучшить работу с компонентами, как для отдельных дизайнеров, так и для групп, использующих систему проектирования в XD.
Как вы можете видеть на видео выше, чтобы вместить эффект тени, ограничивающая рамка компонента кнопки сделана намного больше, чем объект внутри него. Теперь вы можете щелкнуть правой кнопкой мыши компонент и выбрать «Подогнать границы к содержимому», чтобы сбросить границы, таким образом эффективно решив проблему. Вы можете сделать это для одного экземпляра компонента или для основного компонента, чтобы применить изменение сразу ко всем экземплярам в прототипе. Для новых компонентов, созданных в последней версии XD, границы экземпляра автоматически сбрасываются, когда дизайнер добавляет или удаляет из него контент.
Дробных пикселей больше нет
Никто не хочет видеть дробные пиксели, которые искажают или размывают их рисунки, но они иногда это неизбежно, если вы изменяете размеры групп объектов или применяете маски изображений. В этом выпуске Adobe XD мы решили проблему дробных пикселей. Это означает, что теперь вы можете изменять размеры компонентов, повторять наборы сетки, маски изображений и группы объектов, при эти элементы гарантировано всегда будут соответствовать цельному значению пикселя.
Вышеуказанное улучшение означает, что логические элементы могут быть дробными, но не общий элемент. В случае фигур, преобразованных в контуры или элементы, созданные с помощью инструмента «Перо», дробные значения будут сохранены.
Для любого контента, созданного до этого выпуска, дробные значения будут сохранены, чтобы не мешать уже существующей работе, но мы надеемся, что это усовершенствование (и другие обновления в этом выпуске) сделают работу с элементами в XD намного комфортней. Для получения полного списка новых функций и обновлений в этом выпуске Adobe XD перейдите на нашу страницу “Что нового”.