05 Collector: ссылки для дизайнеров и разработчиков



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


    Аддоны и инструменты для работы с графикой


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

    PNG EXPRESS это отличный плагин, который нарежет PSD-макет в PNG и JPEG наборы, а также может сохранить версионность дизайнов и его спецификации ($29)



    GuideGuide поможет вам легко управляться с направляющими



    CSS Hat умеет генерировать CSS-код из стилей слоёв ($29.99)



    WebZap незаменим для быстрого создания мокапов ($19)



    Упростите процесс определения спецификаций дизайна. Specctr работает с Adobe Photoshop, Illustrator и Fireworks ($49)



    CSS3Ps – это бесплатная альтернатива CSS Hat



    Renamy – расширение для массового переименования слоёв



    Enigma64 умеет вырезать нужные слои и сохранять их в PNG или JPG с максимальной оптимизацией, как утверждают разработчики ($24.99)



    LiveSurface поможет дизайнеру посмотреть как будет выглядеть его новый макет «в живую», не покидая Illustrator (MacOS)



    Layervault – это некий «GitHub» для дизайнера



    Коллекция паттернов для ваших дизайнов



    Сервис, проверяющий ваши PSD документы на соответствие правилам сайта Photoshop Etiquette



    Page Layers конвертирует скриншот сайта в слои, раздельные для каждого элемента ($28.99 MacOS)



    Dribbble теперь всегда под руокй



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




    Дизайнерам



    Классный набор мокапов на все случаи жизни за 29 баксов. Они могут пригодиться для приготовления быстрой подачи своих работ


    Бесплатные мокапы мобильных экранов в перспективе


    Подробнейший урок по созданию иллюстрации астронавта в Photoshop


    Занимательный процесс создания шрифта Quixo от немецкой студии FontFont


    Советы по работе со шрифтами в Photoshop


    Подкасты о дизайне


    Просто о хорошем дизайне, нацеленном на решение поставленной перед ним задачи



    UX




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


    ГОСТ по юзабилити



    Разработчикам



    WebGL-генератор морских волн


    Туториал по созданию эффекта «открывающихся» букв


    Статья об анимации линий SVG на примере известного спец-проекта от The Polygon



    Сайты для вдохновения



    Невероятно крутой проект в рамках Chrome Experiments – интерактивная карта мира «Хоббита» (по мотивам фильма П.Джексона). Все последние фишки в веб-разработке на лицо


    Google поднимает уровень опыта чтения с мобильных устройств на новый уровень


    Ред Булл снова радует интересным промо-сайтом, в этот раз рассказывая о событиях в клубной музыке и субкультуре Великобритании


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


    Минималистичный сайт минималистичных часов



    Бонус




    inFORM – это дисплей, позволяющий пользователю взаимодействовать с физическими объектами, но обрабатывающем 3D информацию в цифровом виде


    Техническая сторона истории формата GIF


    Предыдущие выпуски:
    04 Collector
    02 Collector
    01 Collector
    Uprock
    Company
    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More
    Ads

    Comments 12

      +1
      А чем отличается CSS3Ps или CSS Hat от экспорта стиля слоя в css стандартными средствами PS CC?
        0
        В фотошопе эта функция появилась недавно. И всегда должен быть выбор :)
          0
          Во-первых, не все знают, что это можно сделать средствами самого Photoshop :) Во-вторых, далеко не у всех он обновлён до СС. В-третьих, в CSS Hat, например, можно получить код просто кликнув на слое. А в CSS2PS – есть возможность скомипилировать в SASS
            0
            Главная разница в том, что css hat отображает код в панели фотошопа,
            а CSS3Ps генерирует страницу с превью на сервере.

            В Photoshop CC появилась эта функция позже нас и пока не дотягивает.

              0
              Правой кновкой на слое, Copy CSS
              И получается вот такое
              .Rounded_Rectangle_1 { border-style: solid; border-width: 3px; border-color: rgb( 255, 0, 0 ); border-radius: 10px; background-image: -moz-linear-gradient( 90deg, rgb(0,0,0) 0%, rgb(255,255,255) 100%); background-image: -webkit-linear-gradient( 90deg, rgb(0,0,0) 0%, rgb(255,255,255) 100%); background-image: -ms-linear-gradient( 90deg, rgb(0,0,0) 0%, rgb(255,255,255) 100%); position: absolute; left: 239px; top: 131px; width: 238px; height: 180px; z-index: 2; }

              И это не все возможности (как я понял)
              И этого IMHO вполне достаточно (мне). =)
                0
                Я не спорю, кому-то этого будет достаточно.
                А кому-то нужна поддержка SCSS, SAAS, внуниенних теней, внутреннего свечения, внешнего свечения, продвинутое скругление углов и предпросмотр результата.

                Чтобы не быть голословным, я для теста нарисовал кнопку и вот результаты:



                Можете и сами перепроверить, PSD тут: cl.ly/Skbs

            +1
            Спасибо за упоминание наших плагинов: www.renamy.com и www.css3ps.com

            Буквально только, что выпустили новый плагин — www.zeick.com для экспорта векторных шейпов из Photoshop в SVG файлы. Надеюсь появится в Collector 06 :)
              0
              Конечно, если будет еще что то интересное пишите
              0
              по поводу svg есть классная либа для анимации lazylinepainter.info/
                0
                Спасибо, добавим в след обзор, чтобы не затерялось
                0
                в теги статьи просится тег «дайджест»
                  0
                  точно, пофиксим

                Only users with full accounts can post comments. Log in, please.