В современных Premium темах Вордпресс, да и просто в стильных и свежих дизайнах часто применяется очень интересный эффект границы двух блоков. Например, шапки и верхнего горизонтального меню. Простое использование контрастных фонов смотрится неинтересно и слишком упрощенно. Но если границе задать некое подобие тени и блика, то картинка разительно меняется.
Достигается подобный эффект добавлением вдоль граничащих блоков двух тонких, всего в 1 пиксель, полосок. Верхняя имеет более темный тон, чем фон блока, а нижняя наоборот — более светлый.
Для начала создадим в Photoshop новый документ и зальем его каким-нибудь темным тоном. Например, #141417.
Создадим новый слой, на котором выделим при помощи инструмента Rectangular Marquee Tool прямоугольник в верхней части и зальем его цветом #35b2c8.
Снимаем выделение (Ctrl+D), создаем новый слой. Теперь нужно увеличить масштаб изображения до максимума, чтобы можно было точно попасть инструментом Pencil Tool (карандаш) величиной в 1 пиксел в нужную точку. Цвет карандаша возьмем #155a66. Это будет граница у верхнего блока. Чтобы уверенно провести линию вдоль всей границы, нужно зажать клавишу Shift. Тогда как бы не дрогнула у вас рука, карандаш ни за что не собьется с курса.
Затем выбираем цвет карандаша для нижнего блока. Напомню, что он у нас нужен для отображения блика. Поэтому должен быть светлее фона. Возьмем, к примеру, #858598. И рисуем на этом же слое вторую линию.
В результате получаем четкую и красивую границу.
Усилить эффект можно за счет применения градиентов для фонов. Например, вот так:
______________________________
Хочу напомнить также, что на блоге Ольги Ивановой продолжается голосование за лучший дизайн блога. Mannodesign.Com тоже принимает участие в конкурсе. И даже пока что в лидерах :Р
Постовой:
Заказываете ли вы запчасти украина или apartments odessa, в любом случае сначала неплохо бы заработать на это денежек — http://webjunk.ru :)
Здравствуйте! Меня зовут Настя Манно. Я веб дизайнер и автор этого блога
Настя, ты - лучшая! Конечно проголосовал за тебя!
А призы победителям там есть? =)
[Ответить]
Давно пользуюсь этой технологией, большинство зарубежных сайтов с уроками по фотошопу в этом стиле тоже сделаны… Удачи в конкурсе, голосовал за тебя…
[Ответить]
Я конечно тоже проголосовал, но у меня есть замечания к топику…
Зачем мучать себе мозг и глаза и рисовать карандашом линию если есть замечательный инструмент Signle Row Marquee Tool - который как раз и выделяет однопиксельную строку - потом “банкой” (Paint Bucket Tool) заливаешь всю строчку
итого три клика горячими кнопками и два клика мышкой
а ещё шрифт плохой - ну тот которым написано Stylish Border - ну да ладно - это к теме не относится :)
[Ответить]
Спасибо, друзья! :)
Андрюш, приз шикарный! Лицензия на софт ePochta Mailer и ePochta Extractor. Вот придумываю уже, что с ними потом делать :)))
Спасибо, Зеленый! :) Верно, в буржунете такие фишки очень распространены.
Steward, можно и так. Вот только все равно придется увеличивать масштаб картинки, так как попасть ведерком в однопиксельное выделение - та еще задачка :)
[Ответить]
Ну насчёт зума я и не спорю :)) - если рисуешь однопиксельную линию как-то глупо когда на экране изображение 1600х1024 :)
[Ответить]
А я предпочитаю все такое средствами CSS делать - быстрее поменять можно. Однако, если кто (имхо) всерьез беспокоится насчет кроссбраузерности, то надежнее вот так, фоновым рисунком…
[Ответить]
Проголосовал :-) И за так называемый урок спасибо.
[Ответить]
dofollowblog, да, можно и в стилях прописать такую штуку. border-bottom и border-top. Только цвета заранее подобрать.
[Ответить]
2 dofollowblog
дык никто ж про вёрстку не говорит - разговор о дизайне в фотошопе :)
[Ответить]
«Хочу напомнить также, что на блоге Ольги Ивановой продолжается голосование за лучший дизайн блога»
Не мог пройти мимо, от меня плюсик :)
[Ответить]
Ну вроде как сначала было вообще про дизайн, а потом так ненавязчиво вступает фотошоп ;) Я вообще из противоположного лагеря, где могу, пытаюсь без графики обходиться. Не всегда получается, однако.
Кому плохо попадать карандашом в пиксели, подобные вещи можно проделывать также увеличением размера холста, задавая нужный фоновый цвет. Но так получится только с краю линии проводить (или рамки рисовать, для фото и т.п.)
Если не рисовать в фотошопе готовый сайт, а делать реплицируемый фон, то такой градиент с двумя полосочками снизу можно сделать тоненьким, шириной пикселей в 10, например. Меньше карандашом мазюкать придется ;)
[Ответить]
Про струмент выделения горизонтальной области в 1 пиксель таки нашлись сказать, токо зачем в него ведерком тыкать? Кривоклавиша Shift + F5 решает :-).
Настя, спасибо, вроде и мелочь, а все красивше ;-) .
[Ответить]
Предупреждаю, все ниже написанное: IMHO;
Во-первых, тема эта очень бородатая!
Пруфлинк: http://habrahabr.ru/blogs/design/57552/
Дата: 17 апреля 2009, 18:55
Раздел: 02. Совершенство до последнего пикселя
Спасибо за внимание. Рад буду услышать твое мнение.)
[Ответить]
Подскажу такую фишечку.
Линию карандашом не обязательно вести. Нужно зажать shift кликнуть в начале предпологаемой линии и в конце. И о чудо, между точек проведется линия. :)
[Ответить]
тыкать заливкой в 1-пиксельное выделение куда легче если перед этим зажать Капс))
[Ответить]
Хм. я вот не тыкаю на заливке ведерком. просто выделяю и нажимаю Контрол+Делейт. перед этим выбрав цвет фона на панельке. Заливка стает таким же цветом, как и выбран=)
[Ответить]
Как-то не очень смотрится. Зачем серый цвет? Обычно отсвечивают грань осветленным цветом нижнего блока (типа “сверху солнышко светит”).
[Ответить]
Вот сколько интересных вариантов озвучили. Спасибо, друзья! :)
nuxdie, на хабре выложен перевод, причем без обратной ссылки. Но суть не в этом. Тема может быть и бородатая, но так как я сама пользуюсь данным приемом, то рассказать о нем на своем блоге считаю вполне уместным. Обо всем остальном - пожалуйста в мыло или в асю, так как к теме поста не относится.
OlegSkadi, все верно, для блика нужно выбирать более светлый тон того же цвета. Серый у меня взят лишь в качестве примера, чтобы было заметнее.
[Ответить]
Ничего особенного, честно говоря.
Имхо делать просто с градиентами и “тенями” куда красивее.
[Ответить]
отличный урок! спасибо :)
[Ответить]