Como Fazer Sidebar com 2 Barras

Para fazer a sidebar do nosso blog com o Fireworks CS4 você irá abrí-lo e clicar em New Document. Coloque as seguintes dimensões:
Width: 982
Largura: 100 (de sua preferência)
Com tudo aberto, iremos clicar na Retangle Tool e fazer um retângulo ocupando toda a altura, porém só uma parte do largura que iremos ajustar o tamanho dele depois de criá-lo, mais ou menos assim:


Clique para aumentar

Depois disso, vamos editar o tamanho do retângulo, num espaço que há para editar tudo o que criamos, visualizem nesse print:

Clique para aumentar

Como podem ver na imagem, iremos mudar o W (Width = Largura) para 208 pixels, mas isso vai como preferir. Se você quiser colocar um contorno terá que trocar para outro tamanho, sem ser 208 pixels. Exemplo: Se puser um contorno de Pixel Soft e com o tamanho de 3 terá que trocar a largura do retângulo para 204 pixels. Veja as configurações dele com contorno:

Clique para aumentar
Feita uma sidebar, clique na pointer tool (setinha preta) e clique na sidebar, e aperte Ctrl + C e depois Ctrl + V no seu teclado, depois arraste a sidebar para o outro lado, tentando ajustar para que o contorno fique nem fora nem com espaços brancos, uma dica - quando já tiver próximo do outro lado tente movê-lo com as setas do teclado que andam de pixels em pixel, fica bem mais fácil deixar sem erros. Veja o resultado:


Está pronto! Lembre-se de preencher no HTML Base com todas as informações de sua sidebar. 
Se você quiser colocar umas sombras de puffles para enfeitar, , clique em Mais Informações para saber como que faz. Se já souber ou não te interessar, até logo e espero que tenha gostado.
Bom, para dar um visual mais bacana em nossa sidebar, com umas sombras de puffles, você deverá aumentar o tamanho da imagem para que exista lugar para colocar o puffle e ele não ficar pequeno. Com nada selecionado, clique em Canvas Size e troque 100 por 200 (próxima imagem), então aumente o tamanho dos retângulos para que fique igual a segunda imagem a seguir:



Após isso clique em inserir para botar uma foto de puffle qualquer, lembre-se que só irá aparecer a silhueta dele, então não ligue para as cores ou rostos. Acompanhem:



Escolha o puffle que você quiser e após de inseri-lo, clique nele, diminua-o para que fique em um tamanho bom sem distorcê-la na largura ou altura. Atenção: Se você diminuir demais, aperte Ctrl + Z para voltar, porque se aumentar a imagem inserida após diminuí-la causará perda na resolução. Então selecione a opção de PhotoShop Live Effects em Filters com o puffle selecionado. Veja:


Vamos marcar as seguintes caixinhas: Stroke e Color Overlay. Stroke será o contorno da sombra e color overlay vai ser a cor que preencherá o puffle. Eu colocarei as mesmas cores da sidebar para ficar em harmonia com a mesma. Veja as imagens:



Faça os seus ajustes, e para fazer outro puffle embaixo dele e virado para o outro lado, siga as instruções a seguir. Clique no nosso puffle sombreado e aperte Ctrl + C e depois Ctrl + V, depois arraste ele para a posição desejada. Veja:


Para espelhar ele e não deixar igual ao de cima você deverá clicar em Modify, Transform e Flip Horizontal com o puffle selecionado. Confira:


E para finalizar, faça a mesma coisa do outro lado. E estará pronta para colocá-la no html do blog. Espero que tenham gostado.

~Conrado

Nenhum comentário:

Postar um comentário