Aba para Menu Vertical

[Bruno Augusto 417]

Nesse tópico obtive algumas sugestões acerca de um estilo para um menu vertical.

 

Acabou que a última opção, com abas verticais, ficou melhorzinha, então decidi fazê-la.

 

Mas montar essa forma está me deixando louco.

 

Eu tentei fazer um retângulo de bordas arredondadas, posicionado verticalmente e tentei encaixar um triângulo para fazer o "pezinho" do mesmo.

 

Mas eu devo ser muito exigente comigo mesmo, já que o resultado não me agradou.

 

Nesse outro tópico, onde o William me ajudou com a animação do menu, eu postei as imagens que consegui fazer.

 

Se olhar com atenção fica bem perceptível o fim do retângulo e o começo do triângulo. Isso me irrita. :P

 

Fora que, olhando de longe fica estranho o canto superior esquerdo estar mais redondo e o inferior esquerdo, coisa que tive que fazer "propositalmente" já que o triângulo do "pezinho" sempre deixava a forma muito quadrada.

 

Alguém me ajuda a fazer algo sutil? E como de praxe, por favor, sem usar a Pen Tool.

[coxao 5]

realmente aquela quina ficou trash... precisa de um acabamento melhor porém ficar triangulo com a quina arredondada acho difícil, pois quanto mais você tenta arredondar o canto e deixá-lo suave o restante perde a forma triangular ficando mais arrededondado

fiz um exemplo aqui, tentando equilibrar tudo, tirando aquela quina, deixar suave e manter a aparência triangular

 

 

1ª - seu original

2º - tentei manter aparência triangular, não ficou bacana

3º - creio ser uma boa solução, não ficou nem redondo d+ e nem triangular d+, suave e manteve a forma original

4º - como ficou o shape e a disposição dos nós para que você crie o seu aí

[Bruno Augusto 417]

Esqueci de mencionar que, o meu original foi feito num Wireframe (senão sofreria ainda mais), apenas para disposição dos elementos visuais que seriam futuramente passados ao HTML + CSS e, por limitações do aplicativo, ficou com um pedaço quadrado.

 

A forma que pretendia fazer seria como nas imagens do segundo tópico mencionado, onde da curva inferior esquerda iria "escorregando" em uma diagonal até o fim da imagem, alinhando com o lado direito da mesma.

 

P.S.: Posso estar enganado, mas essa quarta imagem é feita com a Pen Tool né? Se for, por favor, peço que não a use senão não poderei reproduzir já que nunca conseguiu usar essa Ferramenta Diabolicamente Sarcástica.

[coxao 5]

:huh: WTF

vamos por partes

 

Esqueci de mencionar que, o meu original foi feito num Wireframe (senão sofreria ainda mais), apenas para disposição dos elementos visuais que seriam futuramente passados ao HTML + CSS e, por limitações do aplicativo, ficou com um pedaço quadrado.

 

o que seria esse Wireframe ?

 

 

P.S.: Posso estar enganado, mas essa quarta imagem é feita com a Pen Tool né? Se for, por favor, peço que não a use senão não poderei reproduzir já que nunca conseguiu usar essa Ferramenta Diabolicamente Sarcástica.

 

não foi feito com a pentool... eu usei um path.. a ferramenta é a ROUNDED RECTANGLE TOOL (letra U)... ele ja tem essa forma prontinha, você nao precisar criar nada, só aumentar ou diminuir o RADIUS (la no topo) que é o tamanho da curvatura das bordas, depois peguei a DIRECT SELECTION TOOL (letra A) e movi os pontos como desejava, para adicionais mais nós eu usei a ADD ANCHOR POINT TOOL (letra P) para inserir um ponto entre os dois pontos que formavam a quina do retangulo e poder trabalhar mais suave a curva.

 

mais facil que PEN TOOL só aplicar BLUR ... isso é preguiça de estudar isso sim ! abs ! ^_^