2009 17 de outubro de 2009

De Photoshop arquivo para HTML / CSS para WordPress série

Screen shot 2009-10-17 at 4.59.04 PM Eu sinto falta de ter tempo para ler meus blogs diariamente como eu costumava fazer, mas me deparei com este grande série de um dos meus preferidos: Chris Coyier, cujo um site CSS-Tricks tem me ajudado imensamente.

Na série, ele leva-o do processo de projeto de fazer um layout de página, para o processo de corte e codificação - onde CSS torna o projeto vir à vida. Em seguida, ele leva você através do processo de integração que o código em um CMS (Content Management System), como WordPress. Desta forma tudo (posts, feeds, atualizações) são dinâmicas e site de largura. Eu espero que você assinar o seu feed RSS, confira o seu outros blogs e apreciar a série.

Eu comentei que eu esperava que houvesse um quarto da série para nos mostrar o processo em preparar e codificação a galeria de fotos, formulário de contato, carrinho de compras e Twitter. Todos nós vamos ter que verificar novamente para ver!

Parte 1 começa do zero absoluto no Photoshop, com apenas alguns recursos fornecidos pelo cliente. Nós projetamos a página inicial e pele para o site.

Screen shot 2009-10-17 at 4.47.42 PM

Parte 2 mostra como fatiar o projeto de Photoshop em XHTML / CSS.

Screen shot 2009-10-17 at 4.47.28 PM

Parte 3 mostra como convertê-la em um modelo de WordPress.

Screen shot 2009-10-17 at 4.45.57 PM

Compartilhar

2009 8 de julho de 2009

OK, de volta à dicas de design e Photoshop!

1. Abrir um arquivo sem usar os menus

Simples. Clique duas vezes a área de fundo cinza da janela do Photoshop e do diálogo Abrir arquivo aparece - a magia?

10-photoshop-features-1.jpg

2. Se cinza é Dull, Black é maravilhoso e qualquer cor é melhor!

Para alterar a cinza dentro de uma janela de imagem do cinza ao preto (ou uma cor de sua escolha), Control + Clique com o botão direito (Command + Clique com o botão direito no Mac) sobre a área em torno da imagem e selecione uma cor.

10-photoshop-features-2.jpg

3. Foreground amostra e cores de fundo

Em vez de clicar em primeiro plano ou amostra de fundo para mudar a cor para uma amostra a partir da imagem, clique na ferramenta Conta-gotas e clique para amostra de uma cor foreground - segure a tecla Alt (Option no Mac) para uma amostra nova cor de fundo.

10-photoshop-features-3.jpg

4. Forma uma posição ou Seleção

Quando você está desenhando uma forma ou de seleção ea forma é bom, mas a posição é errado, manter a preensão de o botão do mouse e segure a barra de espaço que você mover a forma ou a selecção para a posição desejada. Deixar ir a barra de espaço e continuar a fazer a sua forma.

10-photoshop-features-4.jpg

5. Obter uma seleção Voltar

Se você perdeu a sua seleção, pressione Ctrl + Shift + D (Command + Shift + D no Mac) para obtê-lo de volta. Ctrl + D (Command + D no Mac) para desmarcar a seleção.

10-photoshop-features-5.jpg

6. Esconder e manter

Se o letreiro de seleção está ficando em seu caminho, Ctrl + H (Command + H no Mac) irá esconder a seleção, mas ainda deixá-la no lugar. Não se esqueça de ligá-lo novamente, ou você pode se perguntar por que as coisas não estão funcionando do jeito que você espera que eles trabalham.

10-photoshop-features-6.jpg

7. Veja o que você está trabalhando

Este é o meu tempo todo saver maior tempo! Quando você arrasta uma ampla camada de um documento para outro você pode ver toda a camada e suas alças de dimensionamento por Ctrl + Click (Command + clique no Mac) na miniatura da camada para selecioná-lo. Em seguida, pressione Ctrl + T (Command + T no Mac) para exibir as alças de transformação e Ctrl + 0 (zero) (ou Command + 0 no Mac) para diminuir a imagem para que as alças de dimensionamento são visíveis.

10-photoshop-features-7.jpg

8. Pilha ou fila Palettes

Para empilhar lado paletas a lado na mesma janela, arraste uma paleta sobre os outros até que uma linha azul aparece em torno dele e deixar ir. Para empilhar paletas um em cima do outro para baixo da tela, arraste e solte uma paleta para a barra logo acima o nome de outra paleta.

10-photoshop-features-8a.jpg

10-photoshop-features-8b.jpg

9. Nenhum botão Redefinir diálogo? Sim, há!

Você pode redefinir diálogos mais o Photoshop para suas configurações originais ou pelo menos a versão algumas das configurações originais, mantendo a tecla Alt (Option no Mac), quando no interior do diálogo - quando você faz isso, o botão Cancel se transforma em um botão de Reset.

10-photoshop-features-9.jpg

10. Que todos os Elipses sua vez em Círculos

Para desenhar um círculo usando a Elliptical marquee ou uma forma de círculo, mantenha a tecla Shift uma vez que você começou a desenhar ea elipse vai se tornar um círculo. Para desenhar do centro para fora, segure a tecla Alt (Option no Mac) enquanto você começar a desenhar uma elipse, em seguida, adicione a tecla Shift para fazer um círculo - manter a exploração ambas as teclas até que você solte o botão direito do mouse.

10-photoshop-features-10.jpg

Compartilhar