Ответы пользователя по тегу HTML
  • Как перенести дизайн из HTML-файла в Figma?

    pozZzitiv
    @pozZzitiv
    Дизайнер и перфекционист
    Я не верстальщик, но, насколько я знаю, просто загнать вёрстку в Фигму нельзя. Может, конечно, есть какие-то плагины помогающие в этом хоть частично, но хз.

    Upd
    Бегло погуглил "html to figma" и нашлись такие вещи:
    плагин https://www.figma.com/community/plugin/11591230249...
    расширение https://chrome.google.com/webstore/detail/html-to-...
    но работоспособность и альтернативы проверяйте уже самостоятельно.
    Оказывается, ответ легко искался поисковиком =D
    Ответ написан
    Комментировать
  • Почему шрифт применяется только к цифрам?

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

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

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

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

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

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

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

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

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

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

    pozZzitiv
    @pozZzitiv Куратор тега Adobe Illustrator
    Дизайнер и перфекционист
    Не совсем понял в чем проблема. Открыл svg, посмотрел, подвигал закрыл с сохранение, открыл снова — всё также и никаких проблем. Что-то у вас с софтом или, простите, руками))

    Как вариант, можно проверить в Аи настройки привязки объектов к сетке, настройки экспорта, а также попробовать разные варианты эскпорта/сохранения svg. Опишите пошагово действия по экспорту svg, открытию в Аи и пересохранении svg после (куда нажимаете, через какие пункты меню, плагины, скрипты и т.п.). Может где-то в процессе ошибка, попробую повторить.

    PS От себя скажу что перерисовывать иконки в Фш (как это сделали вы, я посмотрел оба psd-файла) это извращение. В Иллюстраторе это сделать гораздо проще и быстрее. Приучите себя работать с иконками сразу в векторном редакторе.
    Ответ написан
  • Можно ли сделать лэндинг на всю ширину экрана?

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

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

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

    pozZzitiv
    @pozZzitiv Куратор тега Дизайн
    Дизайнер и перфекционист
    Примерно раз в 1-2 месяца задаётся этот вопрос. Читайте и пользуйтесь пожалуйста поиском.
    Ответ написан
    Комментировать
  • Вопрос к дизайнерам и верстальщикам: какая актуальная ширина размера макета psd?

    pozZzitiv
    @pozZzitiv Куратор тега Дизайн
    Дизайнер и перфекционист
    Ширина (ровно как и все прочие параметры будущего интерфейса) подбирается индивидуально исходя из тематики, функционала, целевой аудитории и её особенностей, задумок дизайнера и других нюансов. Прекратите искать один универсальный и начинайте мыслить шире))

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

    PS Написанное актуально если делаются удобные сайты, если делаете пофигу как только ради оплаты, то можете брать любую ширину, которую выдаст Гугл по запросу «какая ширина у сайта».
    Ответ написан
    1 комментарий
  • Как называется этот стиль рисования?

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

    Скорее всего, надо было более точно описать что именно нужно соблюсти: пропорции тел (тонкие руки, круглые головы, неравномерная обводка), цветовую гамму, общую «условность» и «мультяшность» рисунка и т.п. Зачастую это сильно помогает исполнителю понять и сделать правильно.

    Кстати, картинка с семьёй это фото/скан распечатанной, поэтому, если нужна бумажная фактура под цветами и приглушенные цвета, то это тоже стоит озвучивать т.к. в оригинальной картинке все иначе))

    А стоить такое может от 500 рублей (за небольшую картинку для веба) до 6000 и выше (за рукотворное изображение А4) и это лишь примерные цифры т.к. зависят и от квалификации конкретного человека и от размера и сложности иллюстрации.

    PS А с дешевом не профи вы и не сможете попасть 100% в любой стиль) Тут либо профи нужен сразу, либо натаскивать этого чтобы в будущем он стал профи, но максимально долго оставался дешевым))
    Ответ написан
  • Как работать с модульной сеткой?

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

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

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

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

    Эффективность той или иной рекламы напрямую зависит от: а) возраста сайта; б) тематики и ЦА; в) качества кода и внутренней оптимизации; г) конкурентности ниши в городе и т.п. А подсказать ГРАМОТНЫЙ план продвижения сможет только человек с опытом в этом деле. Советую поискать по сарафанному радио (ну или на фрилансе) спецов или конторы, которые приносили реальный результат и обратиться к ним. Это будет проще в любом случае.
    А то одни будут советовать писать уникальные статьи, другие предложат покупать ссылки, третьи скажут про губительный прогон по каталогам, четвертые приплетут иные устаревшие методы прошлого века.
    Будьте аккуратнее с действиями по советам анонимов в интернете)) Лучше пусть спец с репутацией говорит как надо делать.

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

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

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

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

    pozZzitiv
    @pozZzitiv
    Дизайнер и перфекционист
    Бесплатные для сайта смотрите здесь, но кириллических курсивов там всего парочка. Ещё здесь, но и там не густо.
    Если готовы купить, то самый большой выбор здесь, обязательно найдёте нужный.
    Ответ написан
    Комментировать
  • Как получить доступ к цвету фона в Vector Smart Object?

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

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

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

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