Ответы пользователя по тегу CSS
  • Почему шрифт применяется только к цифрам?

    pozZzitiv
    @pozZzitiv
    Дизайнер и перфекционист
    Ваш файл шрифта не содержит кириллицу. Сначала не собирался писать такой же ответ как у Александра, но бегло погуглил и увидел, что версия с кириллицей существует. https://psdcollection.ru/shrift-riffic-bold/ (одна из ссылок в поисковой выдаче). Вы просто скачали оригинальную латиницу, без поддержки кириллицы.

    Вообще, дизайнер должен прикладывать файлы шрифтов или ссылки на их скачивание. Редко, но бывает, что файлы модифицированы и включают отличающиеся символы или просто работают криво. Приходится качать из разных источников в поисках корректно работающих.
    Ответ написан
    Комментировать
  • Как задать цвет для отдельного элемента svg?

    pozZzitiv
    @pozZzitiv Куратор тега Adobe Photoshop
    Дизайнер и перфекционист
    Если фигуры буквы в коде нет, возможно, конвертер вырезал её в круге или типа того. Без файла не сказать точно.
    Но если проблема в файле, и он сделан через сторонний конвертер, то нужно просто сделать изначально нормальный файл не в Фотошопе, который не предназначен для этого, а в векторном редакторе — Illustrator, Inkscape и т.п. Потом сохранить как svg и радоваться отсутствию глюков.

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

    pozZzitiv
    @pozZzitiv Куратор тега Adobe Photoshop
    Дизайнер и перфекционист
    Приложите скриншоты. Что за наложение такое "через pixel perfect"?
    Судя по тэгам, речь идёт о несовпадении в итоговой вёрстке и макете в Фш. Ну так смотрите какие элементы, в каких единицах измерения у них размер указан в макете и в чём в вёрстке. Проблема давняя и популярная.
    Для текста, например, там куча параметров может быть, см. панель Character.
    Ответ написан
  • Как вы боритесь с наложением слоя в photoshop?

    pozZzitiv
    @pozZzitiv Куратор тега Adobe Photoshop
    Дизайнер и перфекционист
    Никак не борюсь. Это полезный функционал, позволяющий создавать разные эффекты А если серьезно, то есть решения.

    Если есть связь с дизайнером (или другой дизайнер под рукой), то просто просите свести все слои с наложением, отличным от normal, в один слой/объект. Далеко не все осознают, что режимы наложения и эффекты должны применяться строго к одному финальному изображению когда речь о вебе. Так что это задача именно дизайнера — подготовить всё для верстальщика.

    Если же ситуация такая, что надо самому что-то делать, то придется разбираться в исходнике.
    а) Хорошо если там все по папкам, группам, маскам и т.п. разобрано. В таком случае выделяете графику с нестандартным наложением + ее фон и сливаете (merge layers). Если ничего не забыли, то внешне картинка не изменится. Если забыли — ищем, что забыли и повторяем, собрав вместе. Так у нас будет один слой с режимом normal, кромсаете его как надо и используете.
    б) Альтернатива — смарт-объект. По сути тоже самое, что предыдущий пункт, но слои не сливаются в один слой, а сливаются в смарт-объект, который можно будет редактировать при необходимости.
    в) Если в исходнике не сгруппировано и хаос, то сочувствую. Придется покопаться, кликая на нужные слои и отыскивая какие еще относятся к нужному блоку. Не смертельно, но время может отнять. Далее также сливать в один слой и работать уже с нормальным режимом наложения.

    Чаще ленятся вырезать тень и накладывают с multiply. Тут спасёт только вырезание из фона и подгон под фон сайта.
    Ответ написан
    Комментировать
  • Для чего предназначены колонки(сетки) в psd макете?

    pozZzitiv
    @pozZzitiv Куратор тега Adobe Photoshop
    Дизайнер и перфекционист
    Почитайте про модульные системы и модульные сетки, в частности. Это основа очень многих вещей в нашем мире: от печатного дела до строительства. Всё очень легко ищется поисковиком.

    Рандомные ссылки по теме:
    Модульная система вёрстки
    Что такое модульная сетка и для чего она нужна в в...
    Модульная сетка
    Сетки для адаптивного дизайна
    Каркас сайта, или модульная сетка в веб-дизайне
    ну и т.п., в поисковой выдаче информации очень много.
    Ответ написан
    Комментировать
  • Можно ли сделать лэндинг на всю ширину экрана?

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

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

    UPD Человеку для тренировки нужно и макет из интернета. Тогда можно потренироваться делать адаптив из того что есть т.к. в жизни это приходится делать периодически.
    Ответ написан
    3 комментария
  • Как работать с модульной сеткой?

    pozZzitiv
    @pozZzitiv Куратор тега Adobe Photoshop
    Дизайнер и перфекционист
    Если вы дизайнер, то создавайте макет по ней, раз уж создали. Не пропадать же добру.
    Если вы верстальщик, то верстайте макет дизайнера по созданной вами сетке. Не пропадать же добру.
    Если вы не дизайнер и не верстальщик, то оставьте создание сайта специалистам и не пишите подобные странные вопросы здесь.
    Ответ написан
    1 комментарий
  • Svg hexagon Где можно найти такие картинки?

    pozZzitiv
    @pozZzitiv
    Дизайнер и перфекционист
    «Такие» это какие? Просто шестиугольники со скруглёнными углами в формате SVG?
    Для меня такие проще сделать за пару минут в Иллюстраторе, искать дольше. Но и в поиске тоже много находится сразу с примерами кода раз, два и т.п.
    Самих форм шестиугольников огромное количество в интернете, на стоках и т.п. Выбирайте любой.

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

    pozZzitiv
    @pozZzitiv Куратор тега Adobe Photoshop
    Дизайнер и перфекционист
    Для начала уточните что подразумевается под размером: размер в пикселях или размер в килобайтах. Если речь о размере в пикселях, то Фотошоп отлично с этим справляется. Если речь о размере в килобайтах, то откройте в том же Фотошопе и попробуйте разные варианты настроек при сохранении для Веб (Save for Web, без метаданных, качество изображения).

    Есть ещё автоматические сервисы типа https://tinypng.com/ Сжимают классно, но сама картинка может не порадовать.

    PS Я вот не понял, вы вот это изображение хотите скрючить до 36х1000? Зачем?
    Ответ написан
    4 комментария
  • Как наложить сетку на дизайн сайта?

    pozZzitiv
    @pozZzitiv Куратор тега Adobe Photoshop
    Дизайнер и перфекционист
    1. Выше указали плагин для Фотошопа, расставляющий сетку.
    2. Вообще, я эту сетку расставлял сам за пару минут. Выставить в настройках Фотошопа сетку (настройки этой сетки Edit - Preferences - Guides, grid and slices, а сама сетка включается по Ctrl +') по 8рх (это значение для удобства, ну и просто я люблю делать именно так под 960; можно посчитать другие значения исходя из целей) и делишь направляющими на нужное количество колонок (6, 8, 12 и т.п.) кратное модулю в 8рх. Потом рисуешь вертикальные полупрозрачные прямоугольники и расставляешь как надо. Все, сетка готова.
    Соответственно, для другой ширины окна придется делать новый макет с новой шириной колонок (если подразумевается изменение их ширины). На моей практике для верстальщика достаточно макета под минимальную и под максимальную ширину. Дальше он сам.

    Готовые не предлагать, но я на всякий случай оставлю это здесь:
    3.Если лень настраивать самому, то гуглите "XXX grid psd", где ХХХ — это ширина макета и/или указание других особенностей (например, бутстрап).
    Пример запроса
    4. Сайты типа 960.gs на которых готовая сетка под ширину 960рх. На главной можно просто скачать готовые шаблоны с нанесенной сеткой. Собственно, по запросу в поисковике можно скачать такие же шаблоны под разную ширину макета.
    Ответ написан
    5 комментариев
  • Как получить доступ к цвету фона в Vector Smart Object?

    pozZzitiv
    @pozZzitiv Куратор тега Adobe Photoshop
    Дизайнер и перфекционист
    Вообще-то векторные смарт-объекты еще как редактируемы. Двойной клик на нем и открывается: а) если был сделан в Фотошопе, то в новой вкладке/окне Фотошопа; б) если в Иллюстраторе, то запускается Иллюстратор, в нем открывается смарт-объект. Можно изменить что угодно и закрыть с сохранением, а в Фотошопе он обновится автоматически.
    Если в векторе сделан, то просто пересохраните 2 svg с нужными цветами фонов и все.
    Если не установлен Иллюстратор, то надо установить.

    Или у вас просто слой называется Vector Smart Object, а сам слой растрирован?
    Ответ написан
    1 комментарий
  • Заработать на шаблонах для сайтов, реально?

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

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