• Как групировать текстовые стили в sketch?

    Ivnika
    @Ivnika
    Называйте их при создании через слэш "/"
    Например
    pr/text_style_1
    pr/text_style_2
    тогда при выборе у вас будет список pr, а в нем все указанные стили
    59ec42f641138968012422.png
    в примере стили названы 1/1 1/5 1/7
    Ответ написан
    Комментировать
  • Можно ли в Mac OS X скроллинг сделать равномерным?

    Zeraman
    @Zeraman
    Отключите инерционную прокрутку в Системных Настройках
    Ответ написан
    5 комментариев
  • Какой есть хороший сервис для проверки адаптивности сайта на разных устройствах?

    zooks
    @zooks
    Frontend
    Сервисы хрень, F12 не всегда помогает.
    Лучше купите себе устройства на Android и iOS (хотя бы БУ).
    Ответ написан
    6 комментариев
  • Юзабилтити: новая новость справа или слева?

    sergiks
    @sergiks Куратор тега Веб-разработка
    ♬♬
    Зависит от языка. Направление чтения определяет направление от старых к новым.

    Читаем слева направо, значит, слева старые, справа новые.
    Ответ написан
    5 комментариев
  • Как называется такой прием в веб-дизайне?

    @Mr__Twister
    Это называется изометрия.

    Мокап — это не приём, а инструмент, упрощающий работу дизайнера. Мокап — это красивая картинка, которая оформляет какое-то содержимое (например, ваша веб-страница, вписанная в макбук). Вам не нужно каждый раз заново вписывать вашу веб-страницу в макбук, накладывать на неё блики, отрисовывать отражение на столе и настраивать цвета — все настройки уже вшиты в мокаповский PSD, вам остаётся лишь поставить свою веб-страничку в определённое место PSD (как правило, место указывается автором мокапа).
    Ответ написан
    Комментировать
  • Как анимировать сайт? На dribbble часто дизайнеры показывают гифку с работой сайта (скролл, меню, ховеры и т.д). Есть ли уроки на русском?

    Анна, если вы спрашиваете о том как сделать анимацию работающего дизайна, а не простой статичный макет, то для этого есть инструменты вроде Principle
    Ответ написан
    Комментировать
  • В каком приложении можно сделать интерактивный веб-дизайн?

    Nekto_Habr
    @Nekto_Habr
    Чат дизайнеров: https://t.me/figma_life
    Axure RP
    Ответ написан
    Комментировать
  • Есть ли плагин для создания сетки в 12 колонок для Photoshop?

    webirus
    @webirus
    Тыжверстальщик! Наверстай мне упущенное...
    Насколько я помню, с версии 2015, это делается из коробки.
    Просмотр - Новый макет направляющих.

    b98e2e2fe77e47a3a6b3e8d2c5c9ad73.png
    Ответ написан
    Комментировать
  • Откуда вы качаете исходники популярных шрифтов?

    @rinatoptimus
    Ответ написан
    Комментировать
  • Возможна ли конвертация сайта в формат .PSD или .AI со слоями?

    Nekto_Habr
    @Nekto_Habr
    Чат дизайнеров: https://t.me/figma_life
    Да как два пальца, чувак.

    Заходишь на сайт, жмешь CTRL+P, выбираешь Adobe PDF, меняешь формат бумаги (тостер, например, при печати в формат А4 печатается в планшетной версии) и открываешь PDF в иллюстраторе. Всё! Вместо текста, правда, будут кракозябры, но форматирование и вёрстка сохранятся, как и иконки.

    85d4065387c5454aa94b26bc22b0590a.png
    Ответ написан
    5 комментариев
  • Откуда и зачем лишний пиксель в Фотошопе?

    dom1n1k
    @dom1n1k
    Видимо, координата текста считается не от контура непосредственно глифа, а от кегельной площадки. В браузере всё то же самое: откройте инструменты разработчика и посмотрите на границы блоков - от буквы до границы блока часто есть зазор 1px, а в крупных кеглях и больше. Я согласен, что это не всегда удобно, но по-своему это вполне логично.
    Ответ написан
    1 комментарий
  • Есть ли карта развития для веб дизайнера?

    pozZzitiv
    @pozZzitiv Куратор тега Дизайн
    Дизайнер и перфекционист
    Определитесь сначала что вам интереснее делать, а то ощущение что вы где-то услышали слово «веб-дизайнер», подумали что-то неправильно и захотели им стать. Вы хотите только рисовать макеты в Фш или еще и верстать их? Или, может, сразу делать сайты «под ключ»? Для полного цикла разработки вам потребуется знать гораздо больше озвученного в вопросе. Если же только макеты, то всякие нюансы фреймворков и CMS по ходу работы будут пояснять верстальщики, с которыми придется сотрудничать.

    Что нужно знать для того чтобы быть хорошим веб-дизайнером?
    Каждый из пунктов подойдёт для отдельного вопроса или целой статьи, но попробую вкратце.
    • В первую очередь надо иметь вкус. Прививают хороший вкус, например, в художественных школах или просвещенные родители. Самостоятельно читать книги и полезные статьи, смотреть на работы других, сравнивать и понимать что хорошо, а что плохо и почему(!). Приходит со временем и опытом. Если понимание что хорошо, а что плохо не придёт, то лучше менять занятие во избежание траты времени.
    • Нужно знать основы графического дизайна. Композиция (очень важно), визуальная иерархия, влияние пустого пространства, теория цвета. Виды графики (растр, вектор) и форматы изображений.
    • Нужно знать типографику хотя бы на базовом уровне. Виды шрифтов, области применения, параметры шрифтов и т.п. Для этого читаем книги и статьи. Сначала может показаться, что это вообще не имеет отношения к дизайну, но везде, где есть текст она нужна очень сильно. Одной типографикой можно сделать прекрасный дизайн. А многие считают дизайном лишь наличие рюшечек и картиночек.
    • Надо знать инструменты. Можно орудовать и одним, но существует много других, которые облегчают работу над определенными вещами. Не забываем, что помимо общего макета сайта еще потребуется подбирать материал для работы (фото и другую графику), создавать баннеры и иллюстрации, а также наборы иконок (не всегда прокатит скачивание из интернета старых и некрасивых клипартов), создавать коллажи и иную графику, присутствующую на сайте и т.п. Однозначно потребуется Фотошоп для растровой графики, Иллюстратор для векторной (Скетч, если работать на МАКе или КорелДРО, если он больше нравится). Причем, знать не просто на базовом уровне, а знать все инструменты, что они делают и как их можно применять. Это не сразу, с опытом, но не умея обращаться с рабочим инструментом вы не сможете работать быстро и качественно.
      Два редактора нужно обязательно вектор+растр. Причем, уже давно многие современные интерфейсы делаются в векторе из-за большего удобства, просто не все верстальщики хотят учиться верстать из него, плагинов-то под Фш гораздо больше.
    • Нужно уметь проектировать сайт. Для этого помогут основы взаимодействия пользователя с интерфейсом, умение продумать логику работы, архитектуру. Изучить модульные сетки и их работу (типографика передает привет), определять цели проекта, аудиторию. Уметь прототипировать и знать инструменты для этого.
    • Понимать что такое адаптивный и отзывчивый дизайн. Принципы построения и работы сетки при адаптивной верстке. Уметь подготовить макеты под неё. Знать особенности применения разных типов графики (растр, вектор).
    • Нужно знать основы html и css. Важно понимать как все формируется в браузере и как те или иные визуальные элементы задаются в коде сайта. При желании можно совершенствоваться в плане полноценной верстки. Но одному человеку «под ключ» дают лишь малобюджетные сайты и сама верстка это лишь дополнение для несложных сайтов, не требующих использования CMS. Мое мнение, могу ошибаться.
    • Нужно знать и понимать свою роль в процессе создания сайта. Уметь задать клиенту (или руководителю) правильные вопросы, ответы на которые помогут решить поставленную задачу. Уметь взаимодествовать с командой, уметь читать и помогать составлять ТЗ. Понимать как те или иные требования к сайту должны быть соблюдены. Уметь грамотно презентовать свои макеты (часто дизайнерские «фишки» не всем понятны на статичной картинке и нужно суметь объяснить задумку) и аргументированно объяснить свою позицию — почему сделано именно так, а не иначе.
    И пара субъективных требований от меня.
    1. Нужно знать и уметь пользоваться своим родным языком, знать разницу между типами кавычек, тире и дефисов. Уметь писать грамотно адреса и телефоны (для страниц контактных данных, например).
    2. Никогда не использовать текст «рыбу» типа lorem ipsum или не подходящую по тематике. Делаете для строительства — погуглите про строительство, делаете для автомастерской — используйте текст на эту тему. Наличие правильного текста значительно упрощает восприятие макета. Идеальный вариант — работать по готовому контенту от клиента.

    PS Главное помнить: чтобы стать хорошим специалистом в своём деле, надо потратить много времени на оттачивание навыков и наработку опыта. Это не происходит сразу, нужно несколько лет практики с хорошими проектами.
    PPS Если нет определённости, то имеет смысл:
    а) Пойти работать в офис новичком (или даже стажером) за малую з/п и с возможностью обучения на реальных проектах. Поймете ваше ли это и получите опыт.
    б) Пойти на курсы по этой специализации. Сегодня существует ряд организаций и ВУЗов, обучающих этому. Выберите подходящий и там вам ответят на все вопросы и даже научат пользоваться этими знаниями.
    В любом случае, путь самоучки-фрилансера это не самый простой и прибыльный путь. Хотя бы наставник, но нужен.
    PPS Материалы для чтения можно легко погуглить. Даже здесь, на Тостере, много раз поднимались вопросы «что почитать» или «что нужно знать» такому-то специалисту. Воспользуйтесь поиском по запросам типа «книги веб дизайн», «что уметь дизайнеру» и т.п. Я серьезно.

    Если что-то еще вспомню, то дополню.
    Ответ написан
    1 комментарий
  • Есть такая программа, с помощью которой можно прикрутить к колёсику мышки изменение размера кисти в Фотошопе?

    a13xsus
    @a13xsus
    Lazy developer
    Ну вообще-то, чтобы изменить размер кисти, можно зажать Alt + правую кнопку мыши и поводить мышкой влево (для уменьшения) и вправо (для увеличения соответственно).

    N-I: поскольку дополнительные хоткеи на изменение размера кисти -- это квадратные скобки [ и ], то можно даже с помощью по от производителя мыши забиндить скрол вверх\вниз на скобки. Если мышь без по, тогда с помощью любого биндера, например AutoHotKey https://autohotkey.com/download/

    Качайте portable-версию, запускайте, она появится в трее, открывайте - File > Edit Script (редактируем дефолтный скрипт, который автоматически загружается при запуске программы), в блокноте удаляем всё содержимое и пишем две строки:

    WheelUp::]
    WheelDown::[


    Сохраняем, и делаем Reload Script. Всё, теперь при скролле вниз будет срабатывать клавиша [, а при скролле ввверх клавиша ]

    Если нужно, чтобы данный бинд работал только в фотошопе, тогда скрипт нужно отредактировать таким образом, чтобы нажатия посылались лишь в окно ФШ:

    #IfWinActive ahk_class Photoshop
    WheelUp::]
    WheelDown::[
    #IfWinActive


    Разумеется в настройках фотошопа должны стоят дефолтные хоткеи для изменения размера кисти.
    Ответ написан
  • Как узнать какие процессы грузят видеокарту в Windows 10?

    a13xsus
    @a13xsus
    Lazy developer
    В новой версии Sysinternals Process Explorer есть мониторинг GPU.

    gpumon.jpg

    Также есть похожее ПО Process Hacker - processhacker.sourceforge.net
    Ответ написан
    3 комментария
  • Как дизайнеру быть в курсе возможностей верстки (html/css) и javascript?

    bootd
    @bootd Куратор тега CSS
    Гугли и ты откроешь врата знаний!
    Ответ очевиден. Начать верстать. Хотя бы малость. Я понимаю, это сложно, лениво, за то ваш скил, станет очень крутым. Попробуйте записаться на курс в html академии. А так же, постоянно спрашивать и спрашивать разработчиков, но после, проверять, а то многое могут вам наврать, что бы не пришлось потом делать)))

    А так же искать для себя ресурсы, где разработчики выкладывают различного рода приколюхи и эффекты на css, js.
    Читать новостные ресурсы, на подобие хабра и css live, css tricks.

    Вот пример сайтов, где есть клёвые реализации всяких эффектов:
    https://codyhouse.co/
    tympanus.net/codrops

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

    По поводу js, хз, по мне так - это сложный вопрос. Вам особо не нужно его знать, ибо он не делает магии. Наверно вам, как дизайнеру, нужны будут от js только 3 вещи.

    1) Работа с svg - анимации тоже делаются при помощи js
    2) Работа c canvas - эта штука работает только при помощи js
    3) Ajax - вы должны представлять, что это такое и как вы можете им воспользоваться. Но не грубите

    Учить то, как пишется это на js вам не нужно, но знать, что он может, для вашей работы, нужно!

    И на последок caniuse.com/. Этот сервис скажет вам о поддержке браузерами различных возможностей. По типу поддержке css свойств. Вбиваете свойство в поиск и смотрите, как оно поддерживается браузерами. Пример
    Ответ написан
    Комментировать
  • Как оптимизировать направляющие в фотошопе?

    pozZzitiv
    @pozZzitiv Куратор тега Adobe Photoshop
    Дизайнер и перфекционист
    Когда размещаете направляющую держите нажатым Шифт, это будет привязывать направляющие к линейке. Линейку в пикселях и привязка будет к пикселям. При необходимости перед размещением увеличить масштаб, особенно если много объектов и включена привязка к их краям.
    В остальном по-умолчанию привязывается к каждому второму пикселю при масштабе более 100%, к каждому пятому пикселю при 100% и к каждому 10 при масштабе менее 100%.

    не в курсе, есть ли в фотошопе функция "ручками" ввести координату!?

    Конечно есть. Меню View - New guide, выбираете направление (горизонтальное или вертикальное) и позицию в пикселях. В пункте View - New guide layout можно сразу сетку составить (штатный аналог всяких плагинов типа Guide Guide).
    Ответ написан
    Комментировать
  • Плагиат сайта - как быть, если конкурент тупо украл дизайн, верстку, код сайта?

    ThunderCat
    @ThunderCat Куратор тега Веб-разработка
    {PHP, MySql, HTML, JS, CSS} developer
    1) можно подать иск о нарушении авторских и смежных прав (долго и мутно).
    2) Необходимо связаться с региональным представительством Гугл и Яндекс, указать проблему и попросить о блокировке выдачи. Это работает и гораздо быстрее и эффективнее чем все прочие методы. Прецеденты были.

    UPD: для всех кто интересуется - вот как человек боролся и поборл систему
    Ответ написан
    4 комментария