Flex + PSD Layout = Blog – Tutorial v.1


Depois de ter anunciado a criação de um layout para implementação no flex, venho agora apresentar o tutorial de como fazer a separação de layers no Photoshop, e a sua devida importação para o flex.

 

Neste exemplo podem encontrar alguns detalhes de código que pode ser muito util, como o alinhamento central do blog, algum css (externo), viewstack e linkBar, bem como colocar todas as nossas imagens no flex.

 

Se contar-mos com o tamanho da framework (cerca de 220 kb) e sabendo que o final da nossa aplicação compilada o tamanho do swf é de 297kb, conseguimos incorporar as imagens no flex, e fazer o seu layout com apenas 77kb de dados e com uma imagem bem original no flex, quase uma skin.

 

Podem fazer o download do pdf com o tutorial aqui.

Dentro do pdf encontram-se os downloads para o layout.psd (ficheiro de origem do psd com os devidos grupos do layout) bem como o link para o código fonte e visualização online que também podem ver aqui  com o código disponível e umas pequenas alterações.

Aguardam-se opiniões e já agora deixem as vossas experiências gráficas em comentário.

Abraço.

Deixe um comentário ou um Trackback
   

6 Comentários

  1. May 29, 2008 às 12:07 pm | Permalink

    Explorando o que pouco se fala! Parabens, Mario!

    É bom saber fazer na unha, antes do Thermo dar as caras!

  2. May 29, 2008 às 3:11 pm | Permalink

    Ótima iniciativa! Se quiser ajuda na hora de integrar como wordpress é só dá um toque.

  3. Diego M Salvanha
    January 7, 2009 às 6:41 pm | Permalink

    por favor.. me mandem o pdf por email.. n estou encontrando.,.. mt obrigado

  4. January 10, 2009 às 12:13 pm | Permalink

    Diego, esta no link em cima:
    http://msdevstudio.com/blog/download-manager.php?id=17

    Abraço.

  5. January 31, 2009 às 5:44 pm | Permalink

    Ae o download em psd ta offline .
    sera que da pra po online ae ! flw

  6. January 31, 2009 às 8:16 pm | Permalink

    Boas DesignerMaster, o download do psd esta a funcionar, abra o pdf e clique no link… esta no pdf, mas bom, de qualquer das maneiras podem fazer o download do psd em:

    http://msdevstudio.com/blog/download-manager.php?id=16

    Cumps

2 Trackbacks

  1. [...] Entradas » Ultimos Comentários » Entradas Populares » » Flex + PSD Layout = Blog – Tutorial v.1 » Adobe Dreamweaver e Fireworks CS4 Online. » Flex + PSD Layout + msdevstudio = Free [...]

  2. [...] do Mário Santos sobre o tutorial [link] Adobe Flex, Desenvolvimento, Dicas, Gratuito, Informação, novidades, Photoshop, [...]

Deixe um comentário

O seu email nunca será publicado ou partilhado. Campos obrigatórios estão marcados com um *

*
*

Spam Protection by WP-SpamFree