Convert Photoshop designs to CSS website Photoshop para converter designs CSS site

Posted on April 26, 2008 at 5:13 am Postado em 26 de abril de 2008, 5:13 am

Are you a kickass Photoshop person? Você é uma pessoa kickass Photoshop? Can you create amazing looking designs using your Photoshop skills? Se podem criar desenhos surpreendentes procurando utilizar o seu Photoshop habilidades? If so, you might find yourself creating web site mockups in Photoshop for clients and then passing on the design to web site coders to get the final product in HTML. Se assim for, você pode achar você mesmo criar web site mockups no Photoshop para clientes e, depois, passando sobre o desenho para o site codificadores para obter o produto final em HTML.

If you’re one of the many people who create web sites in Photoshop, you might be interested in a free online service that will let you convert your Photoshop design into a strict XHTML compliant CSS web site ! Se você é uma das muitas pessoas que criam sites da Web no Photoshop, você poderia estar interessado em um serviço online gratuito que permitirá que você converter seu design Photoshop em um rigoroso compatível com XHTML CSS web site!

psd2css on-line

Trying to understand and code a CSS website can be a difficult and arduous task (thanks to Microsoft and there four versions of IE in the market!). Na tentativa de compreender e de um código CSS site pode ser uma tarefa árdua e difícil (graças à Microsoft e existem quatro versões do IE no mercado!). It’s much easier, at least for me, to play around in Photoshop and create simple yet cool-looking designs. É muito mais fácil, pelo menos para mim, para brincar no Photoshop e criar simples, mas de aspecto fresco desenhos.

PSD2CSSOnline PSD2CSSOnline is completely free and allows you to upload files in either Photoshop or GIMP, so if you don’t have a copy of Photoshop, you can use the free open-source photo-editing program, the GIMP. é totalmente gratuito e permite que você quer fazer upload de arquivos no Photoshop ou GIMP, por isso, se você não tem uma cópia do Photoshop, você pode usar o livre de código aberto programa de edição de fotografia, o GIMP.

PSD para CSS

When creating your web site design, you need to make sure you use layers as this is what PSD2CSSOnline reads to figure out the different parts of a web page. Ao criar seu web site design, você precisa ter certeza de que você use as camadas é isso que PSD2CSSOnline lê a descobrir as diferentes partes de uma página da web. The trick is to keep the parts of your page that you want separate in different layers of your .PSD file. O truque é manter as partes de sua página que você quer separados em diferentes camadas da sua. PSD arquivo.

There are a couple of simple guidelines you should follow in order for this process to work. Há algumas orientações simples que você deve seguir a fim de trabalhar para esse processo.

  • Don’t make a bunch of layers - If you are an advanced Photoshop user, you might have created many layers that all combine together to make a single object. Não fazer um monte de camadas - Se você é um usuário avançado Photoshop, você pode ter criado muitas camadas que todos juntos combinam de fazer um único objeto. For example, your logo might actually be made of 5 to 6 different layers - but the logo is still one object. Por exemplo, seu logotipo poderá realmente ser feita de 5 a 6 camadas diferentes - mas o logotipo ainda é um objeto. Do not upload the file with the logo still separated out into the 5 or 6 layers - merge them together into one single “logo” layer. Não carregue o arquivo com o logotipo ainda separados fora para o 5 ou 6 camadas - fundi-los em conjunto em uma única "logo" camada.
  • Opacity and Blending Options - You need to rasterize any layer with opacity at anything other than 100%. Opacidade e Blending Options - Você precisa rasterize qualquer camada com opacidade em qualquer coisa que não seja 100%. In Photoshop, you can rasterize a layer by right-clicking on the layer and choosing “ Rasterize Type ” or “ Rasterize Layer “. No Photoshop, você pode rasterize uma camada clicando com o botão direito e escolha a camada "Rasterize Tipo" ou "Rasterize Layer". In the Gimp, create an empty layer just below the one you want to rasterize and then right click on the new layer and choose “ Merge Down” . No Gimp, criam um vazio camada um pouco abaixo do que você deseja rasterize e, em seguida, clique direito sobre a nova camada e escolha "Merge Down". This will rasterize the layer and merge it. Isto irá rasterize a camada e fundir-lo.
  • Modify Gimp Layer Sizes - For some reason the Gimp likes to make layers the same size as the image. Modificar Gimp Layer Tamanhos - Por alguma razão o Gimp gosta de fazer camadas do mesmo tamanho que a imagem. This makes inefficient as you end up with lots of big image files in your web page. Isto torna ineficaz como você acabar com lotes de grandes bancos de imagens em sua página da web. For any layer in the Gimp where the object is smaller than the whole page (most of your layers), click on the layer, then in the layer menu choose “ Autocrop Layer” . Para qualquer camada no Gimp quando o objeto é menor do que a página inteira (a maior parte de suas camadas), clique sobre a camada, em seguida, a camada menu escolha "Autocrop Layer".
  • 4MB PSD File Size Limit - This is the largest file size that you can upload, but it was just a random number picked by the creator. 4MB PSD File Size Limit - Este é o maior tamanho do ficheiro que pode carregar, mas foi apenas um número aleatório captado pelo criador. You can email him and he’ll let increase the limit! Você pode enviar-lhe e ele vai deixar aumentar o limite!

That’s all you need to keep in mind! Isso é tudo que você precisa para manter em mente! Go ahead and create your web page in Photoshop or GIMP and then upload it to see how it turns out! Vá em frente e criar sua página da web no Photoshop ou GIMP e depois carregá-lo para ver como ele sair!

Hopefully, the look you had created comes out in your final HTML output. Felizmente, o olhar que você tinha criado sai em sua última saída HTML. You can also try out a couple of other online services for converting PSD designs to web pages, but they are not free: Você também pode experimentar um jovem de outros serviços em linha para converter designs PSD para páginas da Web, mas eles não são livres:

http://psd2css.com/

http://www.xhtml4u.com/

http://www.psdslicing.com/

http://www.htmlblender.com/

This service is also called PSD slicing, if you want to know the technical term for it. Este serviço é também chamado PSD corte, se você quiser saber o termo técnico para isso. If you don’t feel like paying people to do this slicing for you and PSD2CSSOnline didn’t work out for your complicated design, you can do the slicing yourself! Se você não sentir como as pessoas pagam para fazer isso para você e corte PSD2CSSOnline não trabalhou para fora para seu desenho complicado, você pode fazer o corte-se!

Here are some cool tutorials and guides that you can read on how to design a site in Photoshop and then convert it into HTML: Aqui estão alguns cool tutoriais e guias que você pode ler sobre a forma de concepção de um site no Photoshop e, em seguida, convertê-la em HTML:

http://www.sitepoint.com/article/design-website-photoshop

http://www.entheosweb.com/photoshop/layout.asp

While PSD2CSSOnline may not be the best tool for big designers, it’sa great way to get started if you’re not very familiar with CSS and HTML coding. Enquanto PSD2CSSOnline pode não ser a melhor ferramenta para os grandes criadores, é uma ótima maneira de começar, se você não está muito familiarizado com códigos HTML e CSS. And it’s free, so it’s always worth a shot! E é grátis, por isso é sempre bom um tiro! Enjoy! Apreciar! Source: Fonte: ToThePC

Technorati Tags: Technorati Tags: , De , De , De , De , De , De

If you enjoyed this post, make sure you Se você gostou deste post, certifique-se de subscribe to my RSS feed assinar o meu feed RSS ! !

» Filed Under »Arquivado em Web Site Tips Web site dicas

Related Posts Posts relacionados

2 Responses to “Convert Photoshop designs to CSS website” 2 Responses para "Converso Photoshop desenhos para CSS site"

  1. Siddharth Siddharth said on : disse sobre: April 26th, 2008 at 8:38 am 26 de abril de 2008 em 8:38 am

    Nice thingy Nice thingy
    Will use it whenever in emergency Vai usá-lo sempre em situações de emergência :)


  2. Shaun Shaun said on : disse sobre: April 26th, 2008 at 10:41 am 26 de abril de 2008, 10:41 am

    Hi Aseem - Oi Aseem --

    I want to thank you for the great website and the great article on psd2cssonline.com . Gostaria de lhe agradecer o excelente site, bem como a grande artigo sobre psd2cssonline.com.

    I just wanted to let you know that the max file size has been bumped to 8MB now. Eu queria que você saiba que o tamanho máximo de arquivo tem sido bumped de 8MB agora.

    And we’re adding new features all the time! E nós estamos adicionando novos recursos o tempo todo! Image Roll Overs, text areas, links, zip file download (as well as the old ‘Save As…’ option), auto centered pages and more. Image Roll overs, áreas texto, links, zip download (assim como o antigo "Salvar Como… 'opção), auto centrado páginas e mais.

    Thanks again for the great website and article. Obrigado novamente para a grande site e artigos. Keep up the good work! Mantenha-o bom trabalho!

    – --
    Shaun
    http://psd2cssonline.com


    Please post your comments/suggestions! Favor enviar seus comentários e sugestões!