Como Fazer Sidebar - Postagem DdCP recuperada
Autor: Conrado 8 | Publicado: 2015-06-27T00:24:00-07:00

Para fazer a sidebar do nosso blog com o Fireworks CS4 (veja como baixar na segunda postagem do blog) você irá abrí-lo e clicar em New Document e 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 que é o tamanho da sidebar que o Dragon nos ofereceu. 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 arrastar a sidebar para o outro lado, tentando ajustar para que o contorno fique fora nem 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!!! Mas se você quiser colocar umas sombras de puffles para enfeitar, como o Dragon mostrou na última tutorial, 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ãlo não ligue para as cores ou rostos. Acompanhem:










Escolha o puffle que você quiser e após de&nbsp;inseri-lo clique nele, diminua-o para que fique em um tamanho bom sem distorcê-la na largura ou altura.&nbsp;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 três 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.&nbsp;



~Conrado