2009 17 octombrie 2009

Dintr-un fişier Photoshop pentru HTML / CSS pentru WordPress serie

Screen shot 2009-10-17 at 4.59.04 PM Mi-e dor având timp pentru a citi blog-urile mele de zi cu zi, cum ar fi-am folosit, dar a venit peste această serie mare de la unul din preferatele mele: Chris Coyier, un site al cărui trucuri CSS- ma ajutat foarte mult.

În seria a te duce de la procesul de proiectare a face un aspect pagină Web, la procesul de feliere şi de codificare - în cazul în care CSS face de design veni la viaţă. Apoi el va trece prin procesul de integrare a acestui cod într-un CMS (Content Management System), cum ar fi WordPress. În acest fel totul (mesaje, feed-uri, actualizări), sunt dinamice şi site-ul mare. Sper că vă abonaţi la feed RSS său, a verifica afară de alte bloguri sale şi să se bucure de serie.

Am comentat că am sperat că a fost un 4 în seria a ne arăta în procesul de codare şi pregatesc galerie foto, formular de contact, coş de cumpărături şi de Twitter. Ca toti vom avea de a verifica din nou pentru a vedea!

Partea 1 începe de la zero absolut, în Photoshop, cu doar câteva resurse oferite de client. Noi proiecta pagina de start şi a pielii pentru site-ul.

Screen shot 2009-10-17 at 4.47.42 PM

Partea 2 arată cum să felie de design de la Photoshop în XHTML / CSS.

Screen shot 2009-10-17 at 4.47.28 PM

Partea 3 arată cum să-l transforme într-un şablon de WordPress.

Screen shot 2009-10-17 at 4.45.57 PM

Cotă

2009 08 iulie 2009

OK, înapoi la design si sfaturi Photoshop!

1. Deschideţi un fişier fără să utilizaţi meniurile

Simplu. Faceţi dublu clic pe zona de fundal gri a ferestrei Photoshop şi dialogul File Open apare - magie!?

10-Photoshop-Caracteristici-1.jpg

2. Dacă este gri mat, negru este minunat si orice culoare este mai bună!

Pentru a schimba gri în interiorul unei ferestre de imagine de la gri la negru (sau o culoare la alegere), Control + clic dreapta (Ctrl + click dreapta pe un Mac) pe zona din jurul imaginii şi selectaţi o culoare.

10-Photoshop-Caracteristici-2.jpg

3. Foreground probă şi culorile de fundal

În loc să faceţi clic pe specimenul de prim-plan sau de fundal pentru a schimba culoarea la un eşantion de imagine, faceţi clic pe instrumentul Pipetă şi faceţi clic pentru a gusta o culoare de prim-plan - ţineţi ALT (Option pe Mac), pentru a gusta o culoare de fundal nou.

10-Photoshop-Caracteristici-3.jpg

4. Poziţionaţi o formă sau de selecţie

Când sunteţi desen sau o formă de selecţie şi forma este bine, dar poziţia este greşită, ţine apăsat butonul mouse-ului din bara de spaţiu şi ţineţi aşa cum vă mutaţi forma sau de selecţie în poziţia dorită. Să mergem pe bara de spaţiu şi să continue să facă formei.

10-Photoshop-Caracteristici-4.jpg

5. Obţineţi o selecţie Inapoi

Dacă aţi pierdut selecţia, apăsaţi Ctrl + Shift + D (Ctrl + Shift + D pe Mac), să-l înapoi. Ctrl + D (Comandă + D la Mac) deselectează de selecţie.

10-Photoshop-Caracteristici-5.jpg

6. Ascunde şi să păstreze

Dacă marquee de selecţie este să vă stea în cale, Ctrl + H (Ctrl + H pe un Mac), se va ascunde de selecţie, dar încă se lasă în loc. Nu uitaţi să-l întoarcă pe sau s-ar putea întreba de ce lucrurile nu sunt de lucru aşa cum vă aşteptaţi ca ei să lucreze.

10-Photoshop-Caracteristici-6.jpg

7. Vezi ce lucraţi la

Acest lucru este mea tot mai mare de timp economizor de timp! Când glisaţi un strat mare de la un document la altul se poate vedea întregul strat de dimensionare şi mânere de Ctrl + clic (Ctrl + clic pe un Mac) pe miniatura stratului pentru ao selecta. Apoi, apăsaţi Ctrl + T (Comandă + T la Mac) pentru a vizualiza mânere de transformare şi Ctrl + 0 (zero) (sau Command + 0 pe un Mac) pentru a micşora imaginea, astfel încât ghidajele de dimensionare sunt toate vizibile.

10-Photoshop-Caracteristici-7.jpg

8. Stivă sau linia de sus Palete

Pentru a stivui paletele parte de către partea în acelaşi dialog, trageţi o paleta de peste ceilalţi până la o linie albastră apare în jurul lui şi să plece. Pentru a stivui paletele unul pe partea de sus a de altă parte în jos pe ecran, glisaţi şi fixaţi o paleta de pe bara de mai sus doar un alt nume de paleta lui.

10-Photoshop-Caracteristici-8a.jpg

10-Photoshop-Caracteristici-8b.jpg

9. Nu Buton de dialog? Da, există!

Puteţi reseta dialoguri mai Photoshop la setările lor originale sau cel puţin o versiune de setările originale de ţinând apăsată tasta ALT (Option pe Mac), atunci când în interiorul dialog - atunci când faci acest lucru, butonul Revocare se transformă într-un buton de resetare.

10-Photoshop-Caracteristici-9.jpg

10. Fie ca toate elipse dvs. transforma în cercuri

Pentru a desena un cerc folosind selecţie eliptice sau o formă cerc, ţineţi apăsată tasta Shift Odată ce aţi început desen si elipsa va deveni un cerc. Pentru a trage de la centru spre exterior, ţineţi apăsată tasta ALT (Option pe Mac), în timp ce începe să desenaţi o elipsă, apoi se adaugă tasta Shift pentru a face un cerc - Păstraţi exploataţie ambele taste până când drumul pe butonul mouse-ului dreapta.

10-Photoshop-Caracteristici-10.jpg

Cotă