15.07 / Web
Выбираем инструмент Raunded Rectangle Tool 
С помощью направляющих отмеряем одинаковое расстояние от фигуры. Идем в Edit Free Transform Path, либо жмем Ctrl+T Удерживая клавишу Ctrl тянем нижние точки к направляющим. Что бы точка не смещалась вниз/вверх удерживаем еще и клавишу Shift После расстановки точек, жмем Enter
Направляющее можно убрать (Ctrl+:) они нам больше не понадобятся.Удерживая клавишу Ctrl, в панели слоев кликаем по слою с фигурой. Создаем новый слой (вверху фигуры) — иконка 
в панели слоев. Выбираем инструмент 
Gradient Tool (G) Выставляем цвета градиента от #cccccc до #000000 Применяем градиент, снимаем выделение Ctrl+D Кликаем по слою с фигурой правой кнопкой — выбираем Blending Options, выставляем Stroke 2px цвет черный #000000
Инструментом Rectangle Tool 
внизу закладки пристраиваем черную полоску. Переключаемся на инструмент Move Tool (V) Держим клавишу Alt берем черную полоску и тащим вверх. Проще говоря, дублируем слой.
Переходим в Blending Options (^) нового слоя Отмечаем Gradient Overlay Выставляем цвета от #e9e9e9 до #cccccc Storke 1px #b2adad, чуть темнее, чем фон. Теперь наведите порядок в строю слоев — то, что должно быть вверху — вверх, то что внизу — вниз ) Ну и пишем текст )
Навигация web2.0
Направляющее можно убрать (Ctrl+:) они нам больше не понадобятся.
в панели слоев. Gradient Tool (G)
внизу закладки пристраиваем черную полоску.
Комментарии:
31 августа 2007 - 11:10, UltraPixel (вст) / http://www.upx.ru
На CSS можно кодом (!) делать такое…
Даю пример с углами, но и трапеции делаются также…
Вариант с картинкой хуже т.к. добавляет запросов (картинки могут не прогрузиться) и не работают у пользователей с отключенными картинками.
http://www.cssplay.co.uk/boxes/krazy.html
http://www.spiffycorners.com/
А самый простой пример разметкой при помощи тега «b»:
html:
<div id="box-3">
<b class="r3"></b ><b class="r1"></b ><b class="r1"></b >
<div class="box">
<h3>Округляем до 3px</h3>
<p>тест.тест.тест.тест.тест.</p>
</div>
<b class="r1"></b ><b class="r1"></b ><b class="r3"></b >
</div>
css:
.r1, .r2, .r3 {
display: block;
height: 1px;
}
.r3 { margin: 0 3px; }
.r2 { margin: 0 2px; }
.r1 { margin: 0 1px; }
#box-3 .box, #box-3 b {
background-color: #CCCCCC;
}
.box {
padding:1em;
}
ответить
На CSS можно кодом (!) делать такое…
Даю пример с углами, но и трапеции делаются также…
Вариант с картинкой хуже т.к. добавляет запросов (картинки могут не прогрузиться) и не работают у пользователей с отключенными картинками.
http://www.cssplay.co.uk/boxes/krazy.html
http://www.spiffycorners.com/
А самый простой пример разметкой при помощи тега «b»:
html:
<div id="box-3">
<b class="r3"></b ><b class="r1"></b ><b class="r1"></b >
<div class="box">
<h3>Округляем до 3px</h3>
<p>тест.тест.тест.тест.тест.</p>
</div>
<b class="r1"></b ><b class="r1"></b ><b class="r3"></b >
</div>
css:
.r1, .r2, .r3 {
display: block;
height: 1px;
}
.r3 { margin: 0 3px; }
.r2 { margin: 0 2px; }
.r1 { margin: 0 1px; }
#box-3 .box, #box-3 b {
background-color: #CCCCCC;
}
.box {
padding:1em;
}
ответить
15 сентября 2007 - 16:55, UltraPixel (вст) / http://www.upx.ru
Ну, если градиент использовать, то можно через javascipt сделать… :)
…ну, или через png весом 150 байт, а закругление дать через css! :)
http://trifler.ru/blog/i/users/radius.htm
ответить
Ну, если градиент использовать, то можно через javascipt сделать… :)
…ну, или через png весом 150 байт, а закругление дать через css! :)
http://trifler.ru/blog/i/users/radius.htm
ответить
15 сентября 2007 - 17:36, UltraPixel (вст) / http://www.upx.ru
Хотя да, с картинкой делать проще))
С кодом заморочки выходят и теряется кроссбраузерность… :|
_http://www.upx.ru/temp/web20.html
вот чего кодом намудрил))
ответить
Хотя да, с картинкой делать проще))
С кодом заморочки выходят и теряется кроссбраузерность… :|
_http://www.upx.ru/temp/web20.html
вот чего кодом намудрил))
ответить
24 января 2008 - 00:32, Black (вст) / http://gamepod.ru
Это форум о Фотошопе, не стоит предлагать зделать сложным кодом то что можно просто нарисовать.
ответить
Это форум о Фотошопе, не стоит предлагать зделать сложным кодом то что можно просто нарисовать.
ответить
14 ноября 2009 - 17:13, Электродвигатели (вст) / http://midelectro.com.ua
Народ ! У кого есть набор иконок в стиле web2.0 для шопа ? Ну оччень надо !"
ответить
Народ ! У кого есть набор иконок в стиле web2.0 для шопа ? Ну оччень надо !"
ответить
2 марта 2010 - 10:53, Дмитрий (вст) / http://qard.ru
Да ну …. неочень то смахивает на веб 2.0 … но все же спасибо )
ответить
Да ну …. неочень то смахивает на веб 2.0 … но все же спасибо )
ответить
Очень даже неплохо:)
Конечно, очень просто… но под менюху как раз