Создание градиентного горизонтального меню в фотошоп.

[ВовчиГ]

Недавно начал изучать фотошоп и html.

И вот натолкнулся на загвоздку:

как мне сделать меню с закругленными углами и еще при наведении на пункт меню чтобы менялся цвет?

Я пробовал рисовать меню, в принципе все получилось нормально, но когда дело дошло до совмещения картинки со списком в html встал в тупик.

Я пробовал задать абсолют картинке и списку и совместить их маргинами, но получилось плохо.

Можете что нибудь подсказать или навести и указать в каком направлении копать?

[Selen]

Недавно начал изучать фотошоп и html.

И вот натолкнулся на загвоздку:

как мне сделать меню с закругленными углами и еще при наведении на пункт меню чтобы менялся цвет?

Я пробовал рисовать меню, в принципе все получилось нормально, но когда дело дошло до совмещения картинки со списком в html встал в тупик.

Я пробовал задать абсолют картинке и списку и совместить их маргинами, но получилось плохо.

Можете что нибудь подсказать или навести и указать в каком направлении копать?

Закругление углов решается через:

border-radius: px;

-moz-border-radius: px;

-webkit-border-radius: px;

behavior: url(pie/PIE.htc);

PIE скачай с сайта автора, поищи в гугле. Там есть нюанс с закруглением картинок. Но на Хабре есть решение. А цвет меняй с помощью :hover.

Edited February 7, 2011 by Selen

[ВовчиГ]

А нельзя без дивов обойтись? Я хочу чтобы меню кроссбраузерное получилось...

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

Желательно конечно нарисовать в фотошопе, а потом вставить в html.

[Selen]

А нельзя без дивов обойтись? Я хочу чтобы меню кроссбраузерное получилось...

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

Желательно конечно нарисовать в фотошопе, а потом вставить в html.

Вместе с вендорными префиксами и содержимым PIE скругление будет кроссбраузерное. На мой взгляд решение с картинкой не совсем то. Это не метод верстальщика.

[ВовчиГ]

Спасибо за совет!

А если у меня меню ну оооочень не стандартное и дивы просто по форме не подходят?

У меня меню состоит из упавших капель краски...

[Selen]

Тогда Тебе помогут теги <map></map> и <area coords="shape" coords="X1,Y1,X2,Y2 …Xn,Yn" /> и вырисовывай капли. Хотя бы примерно.

[ВовчиГ]

А если запихать их в ареа шэйп ректагле? Зачем вырисовывать?

Или ты имеешь ввиду чтобы ссылки красивые получились?

А еще я не понимаю как мне при наведении и нажатии цвет менять?

Я пробовал через джаву не получилось.

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

Ан, не получилось

[Serlutin]

Во-первых, покажи лучше то что хочешь сделать, а не объяс

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

онтальное меню делается с помощью списков (UL LI). Есть несколько вариантов: делать с помощью float: left (или Right).

Смену картинки делаем, через :hover

На мой взгляд решение с картинкой не совсем то. Это не метод верстальщика

Тогда Тебе помогут теги <map></map> и <area coords="shape" coords="X1,Y1,X2,Y2 …Xn,Yn" /> и вырисовывай капли.

Ага, картинку подложить не метод верстальщика, а вот использовать обычные картинки, да и ещё с map - это прям идеал.

[Selen]

Во-первых, покажи лучше то что хочешь сделать, а не объяс

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

онтальное меню делается с помощью списков (UL LI). Есть несколько вариантов: делать с помощью float: left (или Right).

Смену картинки делаем, через :hover

Ага, картинку подложить не метод верстальщика, а вот использовать обычные картинки, да и ещё с map - это прям идеал.

Еще раз перечитай мой первый совет.

Идеальный вариант:

1. Меню через UL, LI.

2. Скругление через border-radius.

3. Картинка-ссылка

4. Изменение картинки - через Ховер.

Ну если человек очень хочет меню в форме капли и для него не важно, будет ли ссылка интерактивной. Я предложил МАР.

Не нужно выдергивать цитаты из контекста и показывать, какой ты умный и красивый!

[ВовчиГ]

Так как мне это сделать?

Я в фотошопе норм, а в верстке профан...

[rus]

Недавно начал изучать фотошоп и html.

Вот решил написать вам (новичкам) рекомендации по созданию логотипов.

еще один перл

по теме: 38 попугаев+попугайское крылышко

[ВовчиГ]

Я по меню, веб-дизайну хреново, а нарисовать логотип пожалуйста...

[Great Rash]

Как же без фотошопа то? Вектор?

[ВовчиГ]

Я вектор люблю, только рисовать что то сложное не получается.. я с растром лучше работаю...

Я в начале имел ввиду что фотошоп в веб дизайне не умею применять...

Я с фотошопом три года работаю...

Моя главная проблема с меню - я не могу цвет капли краски изменить..

Как мне менять картинку?

[Serlutin]

Моя главная проблема с меню - я не могу цвет капли краски изменить..

Я никак понять не могу причём тут фотошоп. Или вы в фотошопе не умеете цвет менять.

Вам уже в сотый раз говорят используйте :hover

Edited February 7, 2011 by Serlutin

[ВовчиГ]

Я ЗНАЮ КАК МЕНЯТЬ ЦВЕТА!!!

Что мне прописать в ховере?

[Selen]

Я ЗНАЮ КАК МЕНЯТЬ ЦВЕТА!!!

Что мне прописать в ховере?

.class_name:hover {

background: url("link_on_picture");

}

[ВовчиГ]

Так просто?!

Я пытался через js...

Иногда мы так себе усложняем жизнь...