Ссылки. Быстро или круто
Большинство дизайнеров (я встречал всего лишь несколько человек, которые так же заморачиваются на мелочи в дизайне, как и я) показывают ссылки в макетах через нажатие на кнопку «Underline» («Подчеркивание»):
Такой вариант мгновенно превратит блок текста в блок ссылок, и в результате будет всего 1 слой. Вот только плюсы на этом закончились. И эти 2 на первый взгляд преимущества (1 нажатие на кнопку и 1 слой) перевешивает, казалось бы, несущественный минус — этот блок выглядит коряво, неаккуратно: подчеркивания находятся на разном расстоянии (1 или 2 пх от текста) и они разной ширины (в один пиксель, в полтора и в два пикселя). Заказчик не заметит разницы. Вернее, даже если заказчик эстет, то он не будет знать о том, что можно сделать «сексуальные» ссылки в макете, а соответственно и в последующей верстке (например, как у меня в правом сайдбаре ^^), иначе этот заказчик был бы уже исполнителем 🙂
Другой вариант — сделать подчеркивания вручную,
По времени: полминуты — минута на один текстовый блок. Согласитесь, в рамках всего проекта — ерунда. И да, естественно, будет уже не один слой. Из-за того, что аккуратная векторная линия будет выглядеть более темной, относительно растрового текста, подчеркиваниям нужно снизить непрозрачность до 33%:
Все вместе:
Увеличим первый (программый вариант визуализации ссылок, через нажатие на «волшебную» кнопку) и третий (ручной вариант):
Хорошо видно, что в самом популярном способе превращения текста в ссылку подчеркивания у ссылок находятся на разных расстояниях (1 или 2 пх от текста) и разной ширины (в один пиксель, в полтора и в два пикселя). Из-за чего смотрится это неаккуратно, как будто слепили на коленке. Вернее так и получается: на коленке, нажали ведь всего 1 кнопку. В ручном же варианте все так, как нужно: подчеркивание у всего блока одинакого размера и на одинаковом удалении от текста.
Записал видео, чтобы наглядно показать насколько это просто, и насколько круче результат:
Советую привыкать тратить на полминуты — минуту больше времени на один блок ссылок в макете, но чтобы в результате получалась конфетка.
Когда дизайнер перестанет лепить макеты быстренько абы деньги забрать у заказчика да пошустрее, а начнет получать кайф от того, что видит в результате, он перейдет на следующий уровень.
Level1 up!Update
Заметка устарела.
В фидбеке о портале города Алчевска есть картинка, на которой видно, что я не группирую подобные шейпы (в примере — это разделители, но смысл абсолютно такой же), а объединяю в один.
Объединяйте подобные шейпы в один. И не группируйте полученный шейп, потому что группа из одного слоя — это уже два слоя.
12 комментариев на «“Ссылки. Быстро или круто”»
Добавить комментарий
Для отправки комментария вам необходимо авторизоваться.
Ну ты «маньяк» такое руками делать, зря время только тратишь) поставь плагин UberLine
Спасибо за совет 🙂 К сожалению, не работает с CS6, переустанавливать все на CC нужно с мыслями собраться 🙂 Настолько привык фигачить так линии, что по времени занимает столько же сколько и в ролике, а на выходе получаю тоже самое — векторную линию
Тоже пришел к этому решению (подчеркивание вручную). Хотя, конечно, предпочел бы иметь нативный инструмент в фотошопе. А за подсказку с UberLine спасибо, парни! Осталось дождаться эту радость на CC 2015.
Алексей, хотела спросить твое мнение о ссылках с пунктирным подчеркиванием. То есть по «классическим правилам» пунктирными линиями подчеркивают ссылки, которые делают что-то без перехода на другие страницы (открывают всплывающие списки, формыи т. д. и т. п. ). Как считаешь, ссылку «Скачать файл» по этой логике стоит делать с пунктирным подчеркиванием или нет?
Я обычно делаю без подчеркивания, но с пиктограммой скрепки. А еще можно сделать в виде кнопки. А если акцент не большой, то кнопку можно сделать контурную. Ну, а по логике — кмк, надо делать сплошным подчеркиванием, ведь файл — это ссылка на другую страницу вложения. Поэтому у меня «скачать бриф» так и сделано.
Этот каноничный вариант ссылок с прозрачным подчеркиванием — лучшее что можно придумать для оформления ссылок. Татьяныч одобряет 🙂
Привет. Алексей, я, как всегда, к тебе за советом. Не знала, где уместнее прилепить свой вопрос — думаю, ближе всего он именно к ссылкам. Подскажи, пожалуйста, как считаешь, нужно ли выделять активный пункт меню, если на нем также расположен выпадающий список (submenu)? Уточню на примере: есть сайт, скажем, с тремя пунктами в главном меню, которым отвечают страницы: 1) О нас, 2) Услуги*, 3) Контакты. При нажатии на 2) Услуги* открывается общая страница с описанием всех услуг, но при наведении на этот пункт меню также появляется выпадающий список: 2.1) Услуга первая, 2.2) Услуга вторая.
Когда мы находимся на страницах «О нас» или «Контакты», мы показываем активными соответствующие пункты в меню. А что делать на странице «Услуги»? Если также выделить активным пункт 2) Услуги*, то сразу теряется видимость наличия на нем submenu. Но и не выделять вроде как тоже нелогично…
Так ведь по внешнему виду должно быть понятно: выпадающий список перед тобой (всякие там стрелочки / треугольники / гамбургерыи т. д. справа / слева) или ссылка на страницу.
Если находимся на общей странице услуг, то выделяю.
Если на странице конкретной услуги, то необязательно. Можно выделить конкретную ссылку прямо в выпадающем списке.
В любом случае, как правило, примерно в этом же месте хлебные крошки ставят, поэтому понять, где находимся не составит труда.
В принципе да. Просто сомневалась, будет ли ощущение, что можно еще навести, если итак активный пункт. Раньше не выделяла на общей странице услуг, но что-то в таком виде все же смущало… Теперь буду тоже выделять, спасибо за совет! 🙂
О, если можно, вопрос вдогонку о хлебных крошках. Скажи, ты в адапиве их всегда выпиливаешь? Или стоит убирать только в адаптиве для смартфонов, а для планшетов оставлять?
Если ты находишься на странице всех услуг, то, вероятно, перейдешь к нужной в середине страницы в блоке с описанием каждой услуги. А значит, ты не столкнешься с выделением или его отсутствием пункта меню в хедере.
Если же ты на любой другой странице, то, скорее всего, будешь искать нужную услугу через выпадающий список, который не выделен, как активный.
Поэтому не особо понимаю, в чем вообще была проблема 🙂
1 или 2 раза за все время. Меня они ни чуть не смущают на смартфонах.
Проблем не было, были просто сомнения в логике правильного для данного случая выделения).
Спасибо за ответы!
Пожалуйста