• Как считать параметры текста в Figma?

    DimaShved
    @DimaShved
    Web designer
    Я так понимаю у вас ограничены доступы, а именно доступ для верстки. С такими правами вы можете выделить любой слой и посмотреть его свойства необходимые для верстки.
    Есть несколько решений этой проблемы, скорее всего вам подойдет 3 вариант.

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

    2. Попробовать поработать с Zeplin или Avacode, но для этого дизайнер должен сделать интеграцию. Сами вы не сможете сделать, так как права ограничены.

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

    Дубликат делается быстро и просто...
    5dd63071226d3646920475.png
    Появится внизу
    5dd630a09f352401638218.png
    Ответ написан
    Комментировать
  • Как сжать изображение в Figma?

    DimaShved
    @DimaShved
    Web designer
    Уменьшить изображение до необходимого размера и скопировать как PNG. Правой кнопкой по изображению, в меню выбираем "Copy/Paste", затем "Copy as PNG". Вставляем в нужное нам место и весомую фотку удаляем. Если фотку нужно сжать с учетом Retina, то не сложно догадаться, что фотку нужно уменьшить до необходимого размера с учетом множителя Retina.
    Ответ написан
    Комментировать
  • Как сделать в Figma компонент вот таких заголовков?

    DimaShved
    @DimaShved
    Web designer
    Пока что есть только один способ, он костыльный, но он есть. Я его увидел у Google в исходниках. Он применялся не для заголовков, а для label которые заходили на рамку поля в состоянии focus. Как на рисунке.
    5da5a223b28cc764232357.png

    Вот наглядная реализация, в вашем варианте.
    5da5a259b0998748322630.png
    5da5a2c6e681b707420521.png

    Весь фокус в слое Fill, он текстовой добавляя букву l например мы увеличиваем длину слоя которая перекрывает линию (слой border).

    Естественно убираем расстояние между буквами, до тех пор пока не исчезнит пробел.
    5da5a37e56403164779825.png

    Из плюсов это то что это можно реализовать.

    Из минусов, необходим каждый раз подставлять символы и цвет букв l каждый раз нужно менять если изменился фон.

    Из хороших новостей, скоро будет обновление которое даст возможность объектам взаимодействовать в компоненте. В вашем случае черточки будут сами раздвигаться как и компонент в зависимости от текста.
    Пост в ВК
    Ответ написан
    Комментировать
  • Какой фотошоп необходим верстальщику?

    DimaShved
    @DimaShved
    Web designer
    Любая версия, завесит от многих факторов, что вам нужно от PS, какие присылают макеты.
    У меня оптимизированный макет для верстки весит 40-80мб. Я думаю такой макет на вашей системе не тормозил бы с версией СС 2017.

    CS6 Достаточно для современной, комфортной верстки, если макеты без монтажных областей.

    Советую самому выбрать что вам больше подходит, смотрите инструменты и требования вот ссылки:
    Системные требования всех версий
    История версий
    Ответ написан
    Комментировать
  • Как убрать автоматическое изменение размера svg при размещении в макет Adobe Photoshop?

    DimaShved
    @DimaShved
    Web designer
    Вы или PS что-то делаете не так. Не исключено что проблема в самом SVG/
    Вот рабочий и простой пример:

    1) Имеется SVG 100px на 100px, в нем "Эллипс" по центру радиусом 50px
    <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100">
        <circle cx="50" cy="50" r="50"/>
    </svg>

    Попробуйте вставить мою SVG, если вставится как у меня ниже, значит проблема в SVG которые вы используете.

    2) Перетаскиваем в PS, он предлагает растрировать:
    88f081e4a9ff467f9a4f1473b5f1cb7e.png
    3) Вот что получаем:
    0b970ebfebdb41e29c24b196562ff5b6.png
    4) Если вы вставляете то 2 пункта не будет и получится так:
    9b81692cae14490d9bf09bddd9c50c24.png
    Ответ написан
  • Как закрыть файл без сохранения? Горячие клавиши для "Растрировать слой"?

    DimaShved
    @DimaShved
    Web designer
    1. Если все сделать правильно, то никакого подтверждения не будет.

    1) Если вы редактируете формат который не может содержать слои (jpg, png), и при редактировании создаете слои "Сохраняете", то в таком случае появится окно сохранения. Так как вы не сохранили файл в .psd со слоями.

    2) Если вы редактируете .psd файл или другой файл со слоями, затем сохраняете, но свернули папку в слоях или переименовали слой, то в таком случае при закрытии программа PS попросит пересохранить файл, так как вы внесли столь не значительные изменения.

    Попробуйте создать файл, нарисовать там что либо, сохранить в .psd и сразу закрыть проект, в таком случае PS просто закроет проект и не будет требовать сохранения, так как после сохранения вы ничего с проектом не делали.

    2. В современном PS можно настроить практически что угодно.

    1) Редактировать - Клавиатурные сокращения
    2) Клавиатурные сокращения для: Меню программы
    3) Находим Слои и уже там, не мало пролистая вы найдете команду Растрировать

    ba70ba84298045009c812501639752e2.png
    Ответ написан
    Комментировать
  • Как реализовать тень, вернее как правильно указать параметры тени исходя из макета в Photoshop?

    DimaShved
    @DimaShved
    Web designer
    Судя по всему у вас PS не старой версии, а следовательно выберите слой к которому применен стиль, правой кнопкой, затем копировать CSS и вставляем куда вам удобней.

    В итоге
    box-shadow: 0.5px 0.866px 5px 0px rgba(0, 0, 0, 0.75);
    Ответ написан
    Комментировать
  • Отображение шрифта icomoon не корректно?

    DimaShved
    @DimaShved
    Web designer
    1. Все должно быть в кривых и иметь замкнутый контур. Не каких линий и кружочков все в <path>
    2. Желательно иконки делать по сетки, что бы избежать сложных цифр (сэкономит несколько байт, на фоне 100 иконок очень сильно заметно)
    3. Прогоняем https://jakearchibald.github.io/svgomg

    Если вы не умеете работать с SVG в графических редакторах, отдавайте дизайнеру обратно.

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

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

    Делаем проще

    Слои > Новый слой заливка > Цвет...

    55d953d8e85a475cbf5bf3519d292cc7.png
    Ответ написан
    Комментировать
  • Почему не удаляется программа?

    DimaShved
    @DimaShved
    Web designer
    Вы удалили PS, а теперь удивляетесь почему его не видно в "программах и компонентах"?

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

    Посмотрите что твориться тут, PS не только в Program Files.
    C:\Users\User\AppData\Roaming\Adobe\Adobe Photoshop

    Я использую простую программку CCleaner, простая и быстро справляется со своей задачей, удалил программу, почистил реестр, посмотрел автоспуск.
    Ответ написан
    Комментировать
  • Можно ли, все экспортировать в .png?

    DimaShved
    @DimaShved
    Web designer
    Все зависит от самого изображения, где его применять, размеры, кол-используемых цветов.

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

    2. Большое изображение в виде фона, большой фотографии где используется много цветов лучше сохранять в JPG. Но даже тут не без исключений. Создайте документ 1920x1080, белый фон, поставьте кистью точку около 10px без растушевки. Далее сохраняем для web. В настройках если указать JPG качество 70, такой файл весит около 24кб. А теперь возьмем PNG8 так как точка одного цвета, 10 оттенков хватит, в таком случае файл уже весит 2кб.

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

    4. Иконки и прочие мелкие элементы всегда SVG и PNG (PNG8 если используется мало цветов). Так же PNG подходит для постов у которых однотонный фон и на нем какая то графика (фигуры и прочее). Проще говоря PNG начинает много весить где используется много цветов (там где много градиентов и переходов)

    Советую поэкспериментировать с сохранением и понять зависимость.

    А ответ на вопрос простой: Да
    Плохой тон все сохранять в PNG.
    Ответ написан
    Комментировать
  • С какой версии в Photoshop появились Smart Object?

    DimaShved
    @DimaShved
    Web designer
    Не советовал бы на столько древний Photoshop для ноутбука. Старый не значит шустрее, на современном железе.
    Smart Object (Умные объекты) появились в версии CS2, весь список основных изменений есть Тут
    Я бы на вашем месте скачал бы свежую версию Ps но без лишних плагинов, и старался бы не использовать большие холсты и большие изображения. В современном дизайне больше используется фигур, а с простой векторной графикой Ps отлично справляется и не нагружает систему. Следовательно, лучше настроить Ps для производительности.
    Редактирование > Настройки > Производительность
    И там уменьшить историю действий, побольше выделить памяти для PS, так же можно поиграться с уровнем кэша и его фрагментами, в прочем в самом Ps все написано при наведении на настройку.

    Попробуйте с CC версии 14, и запустите свой обычный макет, попробуйте произвести стандартные действия, если будет сильно тормозить, тогда CS2.
    Удачи в экспериментах :)
    Ответ написан
  • Как добавить в Sublime Text 3, HTML документа свой цвет определенному элементу?

    DimaShved
    @DimaShved Автор вопроса
    Web designer
    Вот что получилось!

    8b862dca99504b4c87f14fa2be1202a0.png
    Немного дополню ответ Александра. В моем случае нужно чтобы все подсвечивалось после //=, так как путь к шаблону может быть любой.

    Решил так, взял пример с комментирования. И переделал под свои нужды. В итоге открывающий тег получился //=, а закрывающийся .html. Прошу заметить, закрывающегося тега нет, так как gulp-rigger не сможет распознать нашу строку, но так как все шаблоны заканчиваются на .html, то пусть он и будет являться закрывающим. В итоге чтобы я не написал межды тегами //= и .html будет подсвечиваться.

    Как это выглядит в "HTML.sublime-syntax"
    Вставил после main у меня это 15 строка, с соблюдением отступов.
    - match: //=
          scope: rigger.html
          push:
            - meta_scope: rigger.html
            - match: '.html'
              pop: true


    Так как у меня установлена тема Piatto Dark то и файл я переделыва из этой темы.

    Как это выглядит в "Piato Dark.tmTheme"
    Вставил сразу после <array>
    <dict>
    			<key>name</key>
    			<string>HTML: Rigger</string>
    			<key>scope</key>
    			<string> text.html.basic rigger.html </string>
    			<key>settings</key>
    			<dict>
    					<key>foreground</key>
    					<string>#b39624</string>
    			</dict>
    </dict>

    Еще раз большое спасибо Александру, надеюсь кому нибудь пригодится. Мелочь, а приятно :)
    Ответ написан
    Комментировать
  • Как правильно задать высоту блока когда между верх и ниж. контентом большое расстояние?

    DimaShved
    @DimaShved
    Web designer
    Как тебе такой вариант?

    К левому блоку
    .navigation {
        background: #31475E;
        bottom: 0;
        left: 0;
        position: fixed;
        text-align: left;
        top: 0;
        width: 250px;
    }

    К правому блоку
    .page {
        padding-left: 250px;
    }

    В левом блоке делаем footer
    .footer {
        bottom: 0;
        position: absolute;
    }
    Ответ написан
    2 комментария
  • Как вывести посты в таком оформлении?

    DimaShved
    @DimaShved
    Web designer
    Я бы сделал проще и без PHP, если конечно такой вариант подходит.
    Обращался бы к элементам через псевдокласс :nth-child(even) (все четные элементы).
    Далее в стилях обращаемся ко всем четным элементам и делаем с ним все что угодно.

    Стандартный шаблон поста html
    <article>
            <div class="row">
                    <div class="col-md-6">Текст</div>
                    <div class="col-md-6">Изображение</div>
            </div>
    </article>


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

    css
    В итоге обращаемся к каждому второму элементу поста и меняем местами обтекание колов.
    article:nth-child(even) .col-md-6:first-child {
            float: right;
    }
    Ответ написан
  • В Adobe Photoshop CC 2015.5 нету 3d?

    DimaShved
    @DimaShved
    Web designer
    ¯\_(ツ)_/¯

    2ab38716c9ed4be5a23d98a8b19dbe0b.png
    Ответ написан
    Комментировать
  • Вы когда-нибудь помещали прямоугольник со скругленными углами в другой rectangle со скругленными углами?

    DimaShved
    @DimaShved
    Web designer
    Радиус не будет увеличиваться, так как это параметр прямоугольника. Для того чтобы радиус пропорционально изменял масштаб, нужно преобразовать прямоугольник с закругленными углами в произвольную фигуру.
    Ответ написан
    2 комментария
  • Как быстро нарезать psd adnroid-приложения?

    DimaShved
    @DimaShved
    Web designer
    Есть куча способов это сделать, особенно в последней версии PS. Я использую от 2016.06.03
    Если все экраны в разных файлах, лучше создать один файл с монтажными областями. Если их очень много, разделить по темам, действиям и т.д., как будет удобней.

    Способ 1
    Выделяй все свои иконки и изображения в слоях, далее жмем правой кнопкой и "Сохранить как", там для каждой иконки или изображения есть возможность, задать множители, суффиксы вида "@0.5x" и т.д., так же форматы "PNG, JPG, GIF, SVG (да, если иконка векторная мы можем теперь сохранять и в svg)". Это самый простой способ.

    Способ 2
    Более гибкая настройка, которая зависит от названия слоя. В интернете найдете.
    Вот пример названия слоя 80% image.png24 + 60x60 thumb.png.jpg90%

    Размеры
    120x90 image.jpg или 120 x 90 image.jpg - размер файла 120 пикселей ширина и 90 высота
    400 x 60cm image.jpg - 400 пикселей ширина и 60 см высота
    300mm x 20cm image.jpg - 300 мм ширина и 20 см высота
    200% image.jpg - размер файла в пикселях будет составлять 200% от размера слоя по ширине и высоте

    Качество сохранения
    image.png8 или image.png-8 32-х битный PNG
    image.jpg-100% - JPG с качеством 100%
    image.jpg-1 - JPG с качеством 10%
    image.png-32 - 32-х битный PNG

    Изменение размеров с сохранением пропорций
    250x? image.png
    ?x60in image.png

    Способ 3
    Удобный для сохранения всех слоев или экранов, в вашем случае для приложения. Удобно сохранить все экраны и показать клиенту.
    Файлы > Экспортировать > Монтажные области в файлы
    Файлы > Экспортировать > Слои в файлы

    Сам я чаще всего использую 1 способ, он самый новый и самый удобный, ну и всеми любимая фишка это "Монтажные области" которые мы так долго ждали от PS.

    Надеюсь дальше сам разберешься :)
    Ответ написан
    Комментировать
  • Если на торрент трекере написано - файл проверен, можно ли не бояться вируса или трояна?

    DimaShved
    @DimaShved
    Web designer
    Бояться стоит всегда! На заборе тоже много чего написано.
    Лучше всего раз скачать, и если тебя все устроило оставляй и пользуйся продуктом. И не придумывай себе костыли.
    Не вижу проблему, качай на здоровья. Последняя версия PS.
    Adobe Photoshop CC 2015.5.0
    В общем пользуюсь очень долго и без вирусов.
    Ответ написан
    Комментировать
  • Не работает Browsersync с такой сборкой, что делать?

    DimaShved
    @DimaShved Автор вопроса
    Web designer
    Проблему решена, дело было в самой венде. После обновления с win7 на win10 я заметил проблемы с многими программами, в моем случае была проблема с node.js и путем к глобальным файлам. Где в пути вместо "Администратор", было "Администратор.000". Это не самая главная причина как я считаю, самая главная проблема была в брандмауэре, он блокировал node.js, хотя и был добавлен в исключения, даже с выключенном брандмауэром. В итоге решил по человечески переустановить win10 вместе со всеми программами, и настроить как следует. В итоге все работает. Вот такие вот чудеса, надеюсь это поможет тем, у кого была подобная ситуация после обновления с win7 до win10. Всем удачи!
    Ответ написан
    Комментировать