TSW - That Should Work Blog » photoshop http://blog.msdevstudio.net Flash, Flex, Web e Aplicações Ricas para Internet! Tue, 07 Feb 2012 18:30:10 +0000 en hourly 1 http://wordpress.org/?v=3.3.2 Photoshop Application Layout Toolkit. Ria’s & Web http://blog.msdevstudio.net/2010/11/24/photoshop-application-layout-toolkit-rias-web/ http://blog.msdevstudio.net/2010/11/24/photoshop-application-layout-toolkit-rias-web/#comments Wed, 24 Nov 2010 15:56:43 +0000 Mário Santos http://blog.msdevstudio.net/?p=1988 Bom, este toolkit trata-se de uma segunda alternativa para o layout visual de um projecto que me foi pedido, como não foi aceite posso divulga-la publicamente. O layout apresentado é de uma interface e de todos os controlos que seriam usados nela, são cerca de 50 elementos visuais.

O resultado final que comporta um unico ficheiro PSD prontinho a ser usado nas suas aplicações, completamente separado por layers, grupos e muito tem identificado. Com o poder do Flash Catalyst já devem supor que será simplesmente muito facil importa-lo para as vossas aplicações flex…

Segue a preview (cliquem para ver em maior):

Como não foi aprovado, mas no entanto está 100% funcional, ainda estou meio indeciso se o coloco à venda no graphicriver, se o vou utilizar para um futuro cliente ou o disponibilizo gratuitamente aqui no blog para download…

Que dizem?

Abraço.

]]> http://blog.msdevstudio.net/2010/11/24/photoshop-application-layout-toolkit-rias-web/feed/ 5 Adobe AIR CS3/4 ?!?! http://blog.msdevstudio.net/2008/06/17/adobe-air-cs34/ http://blog.msdevstudio.net/2008/06/17/adobe-air-cs34/#comments Tue, 17 Jun 2008 06:39:46 +0000 Mário Santos http://msdevstudio.com/blog/2008/06/17/adobe-air-cs34/ Bem poderia ser este o nome, mas ainda não o é…talvez futuramente… mas o porquê deste titulo? muito simples.. a adobe lançou no seu labs o SwitchBoard que tem como principal objectivo comunicar com a Creative Suite, que engloba os produtos mais importantes da Adobe (Photoshop, DreamWeaver, Fireworks, Flash, Director, Contribute ou Indesign) Este SwitchBoard disponibiliza o controlo das aplicações adobe a partir dos scripts DOM da suite, tudo isto a partir do AIR.

Foram então disponibilizados no site 2 downloads, o installer que é necessário para correr aplicações AIR que utilizem o SwitchBoard e o SDK que permite aos programadores estudarem e utilizarem o SDK no seu aplicativo (como swc).

 

No pacote de download temos alguns exemplos como do InDesign em que o AIR importa um documento XML para o indesign e um exemplo de photoshop (inúmeras vantagens e possibilidades aqui) que converte uma imagem para .png.

 

Mais informações e download aqui

 

Abraços.

]]> http://blog.msdevstudio.net/2008/06/17/adobe-air-cs34/feed/ 0 Flex + PSD Layout = Blog – Tutorial v.1 http://blog.msdevstudio.net/2008/05/29/flex-psd-layout-blog-tutorial-v1/ http://blog.msdevstudio.net/2008/05/29/flex-psd-layout-blog-tutorial-v1/#comments Thu, 29 May 2008 10:04:41 +0000 Mário Santos http://msdevstudio.com/blog/2008/05/29/flex-psd-layout-blog-tutorial-v1/ 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.

]]> http://blog.msdevstudio.net/2008/05/29/flex-psd-layout-blog-tutorial-v1/feed/ 8 Flex + PSD Layout + msdevstudio = Free Blog http://blog.msdevstudio.net/2008/05/26/flex-psd-layout-msdevstudio-free-online-blog/ http://blog.msdevstudio.net/2008/05/26/flex-psd-layout-msdevstudio-free-online-blog/#comments Mon, 26 May 2008 14:12:12 +0000 Mário Santos http://msdevstudio.com/blog/2008/05/26/flex-psd-layout-msdevstudio-free-online-blog/  

Todos sabemos que a imagem é uma marca. Se repararem conseguimos ter acesso a excelentes aplicativos no showcase do flex em http://www.flex.org/showcase, mas muita gente já pensou como conseguir aqueles layouts fantásticos e chegou à conclusão que se torna bastante trabalhoso fazer um layout gráfico no photoshop por exemplo e conseguir inclui-lo no flex. (aghrrrr… ainda falta algum tempo pro release do thermo…)

Venho desmistificar isto, e dar uma ajuda a quem necessita de algumas noções para começar a melhorar a aparência de aplicações Flex.

O que me proponho fazer (mesmo não tendo muito tempo) é fazer um layout bem simples para uma aplicação flex que apresentará algumas categorias do meu blog. (podendo mesmo substituir o frontend do wordpress com algum trabalho).

Inicialmente apenas irei apresentar os ultimos 10 posts do blog, e um listagem dos detalhes dos ultimos posts, bem como a lista de downloads e mais algumas informações, aliado a pequenos efeitos conseguimos um resultado final excelente.

 

Já comecei com o desenho do layout no photoshop, e aqui fica um pequeno cheirinho do que aí virá. No final da aplicação terminada disponibilizarei o seu código fonte bem como o layout para download.

Aqui está já a preview do layout aproximado que pretendo implementar no flex.

image

Quem quiser já ter acesso ao .psd deste layout, deixe uma mensagem em comentário.

Para já, quero saber apenas a vossa opinião.

Edit: Tutorial já disponivel… vejam aqui

Um abraço.

]]> http://blog.msdevstudio.net/2008/05/26/flex-psd-layout-msdevstudio-free-online-blog/feed/ 11 Web 2.0 Design – Pontos de Referencia http://blog.msdevstudio.net/2008/04/01/web-20-design-pontos-de-referencia/ http://blog.msdevstudio.net/2008/04/01/web-20-design-pontos-de-referencia/#comments Tue, 01 Apr 2008 07:51:14 +0000 Mário Santos http://msdevstudio.com/blog/2008/04/01/web-20-design-pontos-de-referencia/ Ao dar uma volta por mais uma panoplia de sites, dei de caras com este muito intuitivo, interessante e “must-know”.
Para todos os interessados em seguir padroes de desenho e comprender um pouco melhor o que é isto da Web 2.0 aqui fica o link:
http://www.webdesignfromscratch.com/web-2.0-design-style-guide.cfm

outros assuntos também muito interessantes:

http://www.webdesignfromscratch.com/real-web-20-design.cfm Explica o Conceito web 2.0 e explica (não consensual) que a web 2.0 não se trata de design mas sim de simplicidade.

http://www.masternewmedia.org/…/web-20-design-simple-social-design-components-20071017.htm Web 2.0 Social design Components.

http://psdtuts.com/designing-tutorials/9-essential-principles-for-good-web-design/ 9 Princípios básicos para o bom web design

http://www.photoshoplab.com/web20-design-kit.html Web 2.0 Design Kit

Estes links, lidos atentamente, conseguem formar-nos para termos um pouco mais de cuidado a desenhar sites web 2.0 bem como a entender o seu conceito e a aprender como desenhar certos detalhes do nosso site.

Vele mesmo a pena lerem estes links, principalmente o 1, 2 e 4 :)

Abraço.

]]> http://blog.msdevstudio.net/2008/04/01/web-20-design-pontos-de-referencia/feed/ 0 Design de logotipos. http://blog.msdevstudio.net/2008/03/03/design-logotipos/ http://blog.msdevstudio.net/2008/03/03/design-logotipos/#comments Mon, 03 Mar 2008 11:00:31 +0000 Mário Santos http://msdevstudio.com/blog/2008/03/03/design-logotipos/ Perdi um pouco de tempo com alguns conhecimentos de photoshop e decidi criar uns logotipos, apesar de não ser nenhum profissional acho que até ficaram bem engraçados!!

Deixo aqui para que possa dar a vossa opinião sobre os que gostaram mais ou se não gostaram de nenhum :)

logo1 logo2
logo3 logo3_black
logo4 logo5
logo6 logo7
logo8 logo8_black
logo9 logo10


E então? que acham? :)

Aguardam-se comentários!!

]]> http://blog.msdevstudio.net/2008/03/03/design-logotipos/feed/ 16 Adobe Flex Skins, mudando de visual facilmente. http://blog.msdevstudio.net/2008/02/25/adobe-flex-skins-mudando-o-visual-do-flex-facilmente/ http://blog.msdevstudio.net/2008/02/25/adobe-flex-skins-mudando-o-visual-do-flex-facilmente/#comments Mon, 25 Feb 2008 13:56:09 +0000 Mário Santos http://msdevstudio.com/blog/2008/02/25/adobe-flex-skins-mudando-o-visual-do-flex-facilmente/ Quem já está habituado a trabalhar com o Adobe Flex Builder, com certeza que já reparou que nas propriedades da maior parte dos componentes existe algumas propriedades relativas a skin’s, tais como overSkin, downSkin, borderSkin entre outras.. Ora, isto era muito lindo se fosse fácil de perceber.. coisa que se por um lado é bom ter suporte a skins, por outro não se faz a mínima ideia de como as fazer.

Andei a dar mais uma volta pela net e encontrei no site da adobe algo bem interessante. Um componente para o Adobe Photoshop para desenhar skins para o adobe Flex.

Ora, começando, basta fazer o download de flexbuilder3_sdext_b2_ps_100107.zip e extrair o seu conteudo para a pasta Presents que está na pasta de instalação do Adobe Photoshop.

E está feito, basta iniciar o Photoshop, no meu File->Scripts->New Flex Skins e escolham o componente que desejam e aparece-vos o modelo da skin original do Flex. para alterar deve seleccionar layer a layer e alterar um a um, e não colocar mais que um elemento por layer, nem adicionar layers.

No final das alterações feitas, basta esconder o layer (0) o que diz HIDE BEFORE EXPORT, e vão ao menu File->Scripts->Export Flex Skins

Escolhem a pasta de destino e está feita a skin.

No Flex, basta irem em File->Import->Flex Artwork e indicarem a directoria onde o Photoshop guardou as skins.

Depois basta prosseguirem e colocarem um novo Painel na vossa aplicação e ver-lo-ao já com a devida skin.
Nota que esta skin passa a ser utilizada em todos os painéis da vossa aplicação, se desejarem aplicar a apenas um, ou editam o CSS e colocam na definição .meuPainel1 e atribuem essa definição ao Painel, ou q quando da criação da skin no Photoshop, ele pergunta se deseja aplicar a skin a todos os painéis, escolham a outra opção e coloquem o vosso ID do painel a ser afectado pela skin. Mas depois isso fica à vossa descrição.

Ora aqui deixo um pequeno exemplo de um botão e de um Panel:

Para ver o código fonte clique aqui

Mais informações de como alterar a aparência do Flex utilizando o Photoshop, Ilustrador ou Flash CS3

 http://blogs.adobe.com/flexdoc/pdf/fbskinning.pdf

http://www.adobe.com/devnet/flex/articles/skins_styles.html

http://www.adobe.com/devnet/flex/articles/flex_skins.html

Então? Fácil não é??

Aguardam-se comentários.

]]> http://blog.msdevstudio.net/2008/02/25/adobe-flex-skins-mudando-o-visual-do-flex-facilmente/feed/ 3 SplashUp, Editor de imagem online http://blog.msdevstudio.net/2007/12/02/splashup-editor-de-imagem-online/ http://blog.msdevstudio.net/2007/12/02/splashup-editor-de-imagem-online/#comments Sun, 02 Dec 2007 14:09:02 +0000 Mário Santos http://msdevstudio.com/blog/2007/12/02/splashup-editor-de-imagem-online/ Bom, como o flex não tem limites, não me surpreende nada aplicações deste tipo e é por isso que cada vez mais me apaixono pelo Adobe Flex, desta vez com o SplashUp, um editor de imagem online, para quem usa o photoshop ou paintshop vai-se sentir em casa, embora com algumas limitações considero-o bastante acessivel.
Um aspecto interessante é a possibilidade de editarmos imagens directamente da internet, de um pagina qualquer mas também de uma conta como o flickr, facebook ou picasa.

Conta já também com uma consideràvel quantidade de efeitos e filtros.

Preview (utilização de uma imagem da internet, e a criaçao de uma nova):
SplashUp

Para usar requer um registo gratuito.

Disponivel em: http://www.splashup.com/
Post Partilhado em http://www.xtechpt.com

]]> http://blog.msdevstudio.net/2007/12/02/splashup-editor-de-imagem-online/feed/ 1