2009 17 octubre 2009

Des arxiu de Photoshop a HTML / CSS per WordPress sèrie

Screen shot 2009-10-17 at 4.59.04 PM Trobo a faltar tenir temps per llegir els meus blogs diaris com solia fer-ho, però es va trobar amb aquesta gran sèrie d'un dels meus favorits: Chris Coyier, l'únic lloc de CSS-Tricks m'ha ajudat immensament.

En la sèrie que et porta des del procés de disseny de fer un disseny de pàgina web, el procés de tall i la codificació - en CSS fa que el disseny cobra vida. A continuació et porta a través del procés d'integració d'aquest codi en un CMS (Content Management System) com WordPress. D'aquesta manera tot el que (els missatges, feeds, actualitzacions) són dinàmiques i el lloc d'ample. Espero que subscriure al seu feed RSS, fa una ullada als seus altres blogs i gaudir de la sèrie.

Em va comentar que esperava que hi va haver un quart de la sèrie que ens mostra el procés de recerca d'ocupació i que codifica per la galeria de fotos, formulari de contacte, i la cistella de la compra de Twitter. Tots haurem de comprovar de nou per veure!

Part 1 comença de zero absolut en Photoshop, amb només uns pocs recursos proporcionats per part del client. Dissenyem la pàgina d'inici i de la pell per al lloc.

Screen shot 2009-10-17 at 4.47.42 PM

Part 2 mostra com el tram fins al disseny de Photoshop a XHTML / CSS.

Screen shot 2009-10-17 at 4.47.28 PM

Part 3 es mostra com per convertir-la en una plantilla de WordPress.

Screen shot 2009-10-17 at 4.45.57 PM

Part

2009 8 juliol 2009

OK, de tornada al disseny i consells de Photoshop!

1. Obrir un arxiu sense necessitat d'utilitzar els menús

Simple. Feu doble clic a l'àrea de fons gris de la finestra de Photoshop i el quadre de diàleg Obrir Fitxer apareix - la màgia?

10-photoshop-característiques-1.jpg

2. Si és gris mat, Negre és meravellós i qualsevol color és millor!

Per canviar el gris dins d'una finestra de la imatge de gris a negre (o un color de la seva elecció), Control + clic dret (Ctrl + clic dret en equips Mac) en l'àrea que envolta la imatge i seleccionar un color.

10-photoshop-característiques-2.jpg

3. Mostra els colors frontal i de fons

En lloc de fer clic al primer pla o mostra de fons per canviar el color d'una mostra de la imatge, feu clic a l'eina Comptagotes i feu clic per mostrejar un color de primer pla - mantingueu la tecla Alt (Opció en Mac) per provar un nou color de fons.

10-photoshop-característiques-3.jpg

4. Col · loqueu una figura o la selecció

Quan estàs dibuixant una forma o de la selecció i la forma està bé, però la posició és incorrecta, mantingui deixeu anar el botó del ratolí i mantenir la barra d'espai mentre es mou la forma o la selecció en la posició desitjada. Deixeu anar la barra espaiadora i continuï per fer de la seva forma.

10-photoshop-característiques-4.jpg

5. Obtenir una selecció de Tornar

Si has oblidat la selecció, premeu Ctrl + Shift + D (Comando + Majúscules + D a Mac) per recuperar-lo. Ctrl + D (Comando + D a Mac) anul · la la selecció.

10-photoshop-característiques-5.jpg

6. Ocultar i mantenir

Si el quadre de selecció està en el seu camí, Ctrl + H (Ctrl + H en equips Mac), s'oculta la selecció, però segueixen deixant al seu lloc. No t'oblidis de tornar a encendre'l, o potser es pregunti per què les coses no estan funcionant com s'espera que funcioni.

10-photoshop-característiques-6.jpg

7. Mireu el que vostè està treballant en

Aquest és el meu més gran de tots els temps estalvi de temps! Quan s'arrossega una capa gran d'un document a un altre es pot veure tota la capa i els controladors de mida amb CTRL (Comando + clic en equips Mac) a la miniatura de la capa per seleccionar-la. A continuació, premeu Ctrl + T (Comando + T en Mac) per veure els tiradors de transformació i Ctrl + 0 (zero) (o Comando + 0 al Mac) per reduir la mida de la imatge perquè els controladors de mida són visibles.

10-photoshop-característiques-7.jpg

8. Pila o la línia de les paletes

Per apilar les paletes de banda a banda en el mateix quadre de diàleg, arrossegueu una paleta sobre els altres fins que apareix la línia blava al seu voltant i deixar anar. Per apilar les paletes una sobre l'altra avall de la pantalla, arrossegar i deixar anar una gamma de colors a la barra just a sobre de el nom d'una altra paleta.

10-photoshop-característiques-8a.jpg

10-photoshop-característiques-8b.jpg

9. Cap botó de restabliment de diàleg? Sí que n'hi ha!

Pot restaurar la majoria dels quadres de diàleg de Photoshop a la seva configuració original, o almenys alguna versió de la configuració original mantenint premuda la tecla Alt (Opció en Mac) a l'interior del quadre de diàleg - quan vostè fa això, el botó Cancel es converteix en un botó de reinici.

10-photoshop-característiques-9.jpg

10. Que tots els teus punts suspensius es converteixen en cercles

Per dibuixar un cercle amb el Marc líptic o una forma de cercle, premeu la tecla Maj un cop començat el dibuix i l'el · lipse serà un cercle. Per dibuixar des del centre cap a fora, premeu la tecla Alt (Opció en Mac) com de començar a dibuixar una el · lipse, a continuació, afegir la tecla de majúscules per fer un cercle - mantenir la celebració de les dues tecles fins que deixis anar el botó dret del ratolí.

10-photoshop-característiques-10.jpg

Part