2009 17. listopada 2009

Od Photoshop datoteke u HTML / CSS WordPress serija

Screen shot 2009-10-17 at 4.59.04 PM Nedostaje mi da vremena za čitanje moj dnevni blogove kao što sam se, ali je došao preko ovaj veliki niz od jednog od mojih favorita: Chris Coyier, čiji jednom mjestu CSS-trikovi mi je pomogao neizmjerno.

U seriji je vas iz dizajna Proces izrade web stranica izgleda, na rezanje i proces kodiranja - gdje CSS dizajn čini dolaze u život. Zatim je vodi vas kroz proces integracije taj kod u CMS (sustav za upravljanje sadržajem) kao što su WordPress. Na taj način sve što je (poruka, hrani, ažuriranja) su dinamični i mjestu širok. Nadam se da ćete se pretplatiti na njegov RSS feed, provjerite svoje druge blogove i uživati ​​u seriji.

Ja komentirao da sam se nadao da je četvrti u nizu da nam pokaže proces pripremajući i kodiranje foto galerija, kontakt obrazac, košarica i Twitter feed. Svi ćemo morati provjeriti natrag na vidjeti!

Dio 1 polazi od apsolutnog početka u Photoshopu, sa samo nekoliko osigurati sredstva od klijenta. Mi dizajn početnu stranicu i kože za web stranice.

Screen shot 2009-10-17 at 4.47.42 PM

Dio 2 pokazuje kako narezati dizajn Photoshop u XHTML / CSS.

Screen shot 2009-10-17 at 4.47.28 PM

Dio 3 pokazuje kako pretvoriti ga u WordPress predložak.

Screen shot 2009-10-17 at 4.45.57 PM

Udio

2009 8. srpanj 2009

OK, natrag na dizajn i Photoshop Savjeti!

1. Otvorite datoteku bez korištenja izbornika

Jednostavno. Dvaput kliknite na sivom pozadinom području Photoshop prozora i File Open pojavi dijaloški - magija!

10-Photoshop-ima-1.jpg

2. Ako siva je dosadno, crna je prekrasna i bilo koje boje je bolje!

Da biste promijenili sive unutar slike prozor od sive do crne (ili boji po vašem izboru), Kontrola + Desni klik (Command + Desni klik na Mac) na područje oko slike i odaberite boju.

10-Photoshop-ima-2.jpg

3. Uzorak prvom planu i pozadini boje

Umjesto klika na ispred ili iza uzorak za promjenu boje na jedan uzorci iz slike, kliknite alat kapaljke i kliknite na uzorku prvi plan boju - držite tipku Alt (Option na Mac) na uzorku novu boju pozadine.

10-Photoshop-ima-3.jpg

4. Položaj oblik ili odabir

Kada ste za crtanje oblika ili odabir i oblik je u redu, ali pozicija je krivo, držite držite tipku miša i držite razmaknicu dok se krećete oblik ili odabir u željeni položaj. Neka idu razmaknicu i nastaviti kako bi vaš oblik.

10-Photoshop-ima-4.jpg

5. Nabavite Odabir Natrag

Ako ste izgubili svoj izbor, pritisnite Ctrl + Shift + D (Command + Shift + D na Mac) da će ga vratiti. Ctrl + D (Command + D na Mac) Poništava odabir odabira.

10-Photoshop-ima-5.jpg

6. Sakrij i zadržati

Ako je odabir nadstrešnica je uzimajući u vaš način, Ctrl + H (Command + V na Mac) će sakriti izbor, ali još uvijek ostavite ga na mjestu. Nemojte zaboraviti da ga ponovno uključite ili možda Pitam se zašto stvari ne rade onako kako vi očekujete da ih rade.

10-Photoshop-ima-6.jpg

7. Pogledajte što radite

Ovo je moj najveći svih vremena vrijeme saver! Kada povučete veliki sloj iz jednog dokumenta u drugi možete pogledati cijeli sloj i dimenzioniranje ručke za Ctrl + klik (Command + Kliknite na Mac) na sloj sliku da bi je odabrali. Zatim pritisnite Ctrl + T (Command + T na Mac računalu) da biste vidjeli transformirati ručke i Ctrl + 0 (nula) (ili Command + 0 na Mac) za smanjiti sliku, tako veličine ručke su vidljive.

10-Photoshop-ima-7.jpg

8. Stack ili redati Palete

Za hrpu paleta rame uz rame u istom dijaloškom okviru, povucite jednu paletu nad drugima, sve dok plava linija se pojavljuje oko njega i pustiti. Stog palete jedan na vrhu druge dolje zaslon, povucite i ispustite jedan palete na traci neposredno iznad drugog palete ime.

10-Photoshop-ima-8a.jpg

10-Photoshop-ima-8b.jpg

9. Nema gumb Reset dijalog? Da postoji!

Možete resetirati najviše Photoshop dijalozima na njihove izvorne postavke, ili barem neke verzije izvornih postavki držeći tipku Alt (Opcija na Mac računalu) kada u dijalogu - kada to učinite, gumb Odustani pretvara u Reset.

10-Photoshop-ima-9.jpg

10. Neka sve svoje elipse pretvoriti u Krugovi

Da biste nacrtali krug pomoću eliptičan nadstrešnica ili krug oblik, držite tipku Shift kada ste počeli crteža i elipse će postati krug. Izvući iz središta, držite tipku Alt (Option na Mac računalu) kao što početak crtanja elipsu, a zatim dodajte tipku Shift kako bi se krug - držite držite obje tipke dok ne otpustite desnu tipku miša.

10-Photoshop-ima-10.jpg

Udio