Задать вопрос
Aleksei_Segodin

Алексей Сегодин

арт директор / дизайнер
Ответы пользователя по тегу CSS

  • Как сделать litebox на js без плагинов и jq?

    Aleksei_Segodin
    @Aleksei_Segodin
    арт директор / дизайнер
    Недавно появился litebox.pro — там не только не используется jQuery, но также нет, ни CSS файлов, ни картинок среди зависимостей. Подключается только один JS файл библиотеки.
    Превью внизу появятся в самое ближайшее время в одном из обновлений. На момент прочтения, возможно, уже есть.
    Если будут дополнительные вопросы, обращайтесь — я автор :)
    Ответ написан
    Комментировать
    Комментировать

  • Как с файла adobe xd (experience design) вырезать только 1 макет?

    Aleksei_Segodin
    @Aleksei_Segodin
    арт директор / дизайнер
    Есть два варианта:
    1. вручную экспортировать выделенные макеты (от одного и больше)
    2. автоматически экспортировать сразу все


    .
    1. Вручную экспортировать выделенные макеты (от одного и больше)
    1. Выделяете макет (он же artboard) нажав на его название.
    2. Зажмите и держите Shift, чтобы выделить сразу несколько макетов.
    3. Когда все нужные артборды выделены, нажимаете CTRL+E (или через меню Export...) и выбираете формат экспорта и папку в которую их сохранять.


    .
    2. автоматически экспортировать сразу все
    1. Убедитесь что ни один из макетов не выделен. Если выделен, то кликните на пустое поле между макетами.
    2. Нажимаете CTRL+E (или через меню Export...) и выбираете формат экспорта.


    P.S. Если ни один макет не выбран, то экспортируются сразу все.
    Ответ написан
    7 комментариев
    7 комментариев

  • Как сделать в фотошоп градиенты, скругленные углы и другие фишки CSS3 читаемые в Avocode, Adobe Assets, CSS Hat?

    Aleksei_Segodin
    @Aleksei_Segodin
    арт директор / дизайнер
    Это делается через панели Properties и Layer Styles:
    1. Сначала создайте прямоугольник
    8d42009cf2a547de87ac6cdebcddf0b7.png

    2. Потом откройте панель Properties (не знаю как называется в русской версии) и в ней выбирайте цвет или градиент. И там же работайте с обводкой и скруглением углов:
    30d00823921f43adb6e483f1426dcffa.pngf991c68feac84471843ce1dd1b8a4ac5.png

    3. Тени делаются через стили слоя. Двойной клик по слою и откроется панель со стилями:
    f765df29b7524e2c95a6633e1fa778c2.png

    4. Чтобы проверить как будет генерироваться CSS можно нажать правую кнопку мыши на слое и выбрать Copy CSS. Тогда в буфер обмена скопируется CSS код со всеми примененными к нему стилями.
    df05ca69bae04279810752bd509773c4.png

    5. Если в Avocode (и прочих) не будет видно CSS стилей на элементе (например, градиента), то попробуйте наложить его через панель стилей:
    19cee56279f44ba6817999c96a2be9df.png
    Ответ написан
    2 комментария
    2 комментария

  • Как в Dreamweaver CC 2015 создать новое правило CSS?

    Aleksei_Segodin
    @Aleksei_Segodin
    арт директор / дизайнер
    Вам нужна панель CSS Designer (Shift+F11).
    В ней нужно привязать стили к странице. Это может быть внешний CSS файл или вставленный прямо на страницу — вам выбирать. Это делается здесь:

    88e1a03ba4c84ace8ae4bfd179030582.png

    Дальше есть 2 способа:

    1. Нажмите + в поле Selectors и впишите нужный вам селектор. На этом всё :) Параметры CSS будут показы справа если кликнуть по селектору.

    1b615941edec44bf89d57c71bd0603ba.png798fb254a87144f69697aaa90386a61a.png

    2. Второй способ более наглядный: кликаете на странице сайта любой элемент, чтобы его выделить и нажимаете + в поле Selectors. И Дримвивер сам предложит вам название селектора для данного элемента, такое чтобы не конфликтовало с другими элементами на странице. Его можно отредактировать если не нравится.

    e695395b110c40a594b9386316fe3245.png

    Чаще пользуюсь вторым способом. Очень-очень ускоряет работу с версткой (что бы там ни говорили фанаты "блокнотиков").
    Ответ написан
    1 комментарий
    1 комментарий

  • Какое ПО для создания анимированных баннеров для веба сейчас наиболее популярно?

    Aleksei_Segodin
    @Aleksei_Segodin
    арт директор / дизайнер
    Google Web Designer — программа специально для создания анимированных баннеров. И по-моему лучшая в своем роде.

    Говорю как фанат Adobe. Потому что пробовал делать баннеры в EDGE Animate, но на выходе такие баннеры не соответствуют техническим требованиям многих рекламных площадок. А ещё Adobe прекратила поддержку EDGE Animate (и вообще всей линейки EDGE).

    Adobe Animate (он же Flash) открывал, смотрел, но даже не делал в нем ничего, потому что на выходе он генерирует столько тяжеловесного JS-а, что это ни в какие рамки не лезет.

    А с Google Web Designer никаких проблем не заметил. Баннеры получаются относительно небольшими по весу. И баннерные сети принимают их без вопросов.
    Ответ написан
    1 комментарий
    1 комментарий

  • Веб-дизайнер и Верстальщик в одном лице - реально?

    Aleksei_Segodin
    @Aleksei_Segodin
    арт директор / дизайнер
    Я — веб-дизайнер и верстальщик в одном лице. Так что это реально.

    Использую HTML, CSS и JavaScript. С помощью этих троих могу сверстать интерфейс любой сложности. Но пока без 3D интерактива, потому что только недавно взялся за JavaScript.

    А что касается дизайна, то за плечами уже десятки дизайнов сайтов, один из которых даже выиграл золото в номинации "Лучший редизайн сайта" на MENA Transform Awards 2016.

    Кстати, в США это очень распространенено когда дизайнер сам верстает свои макеты. И когда просматриваю вакансии в разных студиях, то замечаю, что всем нужен дизайнер со знанием верстки. Или указывают что знание верстки будет плюсом ля кандидата.
    Потому что только дизайнер сможет сверстать свой дизайн так как нужно, сделать их "pixel perfect" и ни разу не ошибиться в цвете.
    Вот первые попавшиеся вакансии с Биханса для примера:
    SENIOR INTERACTIVE DESIGNER
    SENIOR UX DESIGNER - WEB/MOBILE
    Ответ написан
    Комментировать
    Комментировать