2009 17 okt 2009

Från Photoshop-fil till HTML / CSS till WordPress-serien

Screen shot 2009-10-17 at 4.59.04 PM Jag saknar att ha tid att läsa mina dagliga bloggar som jag brukade, men kom över denna stora serie från en av mina favoriter: Chris Coyier vars en plats CSS-tricks har hjälpt mig oerhört.

I serien han tar dig från design processen med att göra en webbsida layout till skivning och kodningsprocessen - där CSS gör designen kommer till liv. Nästa han tar dig genom processen att integrera denna kod i en CMS (content management system) som WordPress. På detta sätt allt (inlägg, foder, uppdateringar) är dynamiska och plats bred. Jag hoppas att du prenumerera på hans RSS-feed, kolla in hans andra bloggar och njuta av serien.

Jag kommenterade att jag hoppades det var en 4: e i serien för att visa oss processen i prepping och kodning fotogalleriet, kontaktformulär, kundvagn och Twitter foder. Vi kommer alla måste tillbaka för att se!

Del 1 börjar från absolut noll i Photoshop, med bara några som angavs resurser från kunden. Vi designar hemsidan och hud för webbplatsen.

Screen shot 2009-10-17 at 4.47.42 PM

Del 2 visar hur du skära upp designen från Photoshop till XHTML / CSS.

Screen shot 2009-10-17 at 4.47.28 PM

Del 3 visar hur man konverterar den till en WordPress mall.

Screen shot 2009-10-17 at 4.45.57 PM

Dela

2009 8 juli 2009

OK, tillbaka till design och Photoshop Tips!

1. Öppna en fil utan att använda menyerna

Enkel. Dubbelklicka på den grå bakgrunden området i Photoshop fönstret och dialogrutan Öppna visas - Magic?

10-Photoshop-funktioner-1.jpg

2. Om grått är tråkigt, är Black Underbar och vilken färg är bättre!

För att ändra den grå inuti en bildfönster från grå till svart (eller en valfri färg), Ctrl + Högerklicka (Kommando + Högerklicka på Mac) på området kring bilden och välj en färg.

10-Photoshop-funktioner-2.jpg

3. Exempel på förgrunds-och bakgrundsfärger

Istället för att klicka på förgrunden eller bakgrunden färgruta för att ändra färg till en prov från bilden, klicka på pipetten och klicka för att prova en förgrundsfärg - håll Alt (Option på Mac) för att prova en ny bakgrundsfärg.

10-Photoshop-funktioner-3.jpg

4. Placera en form eller val

När du ritar en form eller urval och formen är bra, men läget är fel, hålla tag i musknapp och håll mellanslag när du flyttar formen eller valet till önskat läge. Släpp mellanslagstangenten och fortsätter att göra din form.

10-Photoshop-funktioner-4.jpg

5. Få en markering Back

Om du har förlorat ditt val genom att trycka på Ctrl + Skift + D (Kommando + Skift + D på Mac) för att få den tillbaka. Ctrl + D (Command + D på Mac) avmarkeras valet.

10-Photoshop-funktioner-5.jpg

6. Dölja och hålla

Om markeringsram blir i vägen, kommer Ctrl + H (Kommando + H på Mac) döljer valet men ändå lämnar den på plats. Glöm inte att slå på den igen eller så kanske undrar varför saker inte fungerar på det sätt du förväntar dem att arbeta.

10-Photoshop-funktioner-6.jpg

7. Se vad du arbetar med

Detta är min all time största time saver! När du drar ett stort lager från ett dokument till ett annat kan du se hela lagret och dess storlekshandtag med Ctrl + klicka (Kommando + Klicka på Mac) på lagret bilden för att välja den. Tryck sedan på Ctrl + T (Kommando + T på Mac) för att visa transform handtagen och Ctrl + 0 (noll) (eller Kommando + 0 på Mac) för att krympa bilden så att storlekshandtagen är alla synliga.

10-Photoshop-funktioner-7.jpg

8. Skorsten eller line up Paletter

Att stapla paletter sida vid sida i samma dialogruta, drar en palett över de andra tills en blå linje visas runt den och släppa taget. Att stapla paletter ovanpå den andra ner på skärmen, dra och släpp en palett på baren ovanför en palett namn.

10-Photoshop-funktioner-8a.jpg

10-Photoshop-funktioner-8b.jpg

9. Ingen dialog Återställningsknapp? Ja det finns!

Du kan återställa de flesta Photoshop dialoger till de ursprungliga inställningarna, eller åtminstone någon version av de ursprungliga inställningarna genom att hålla ned Alt-tangenten (Option på Mac) när inne i dialog - när du gör detta, vänder Avbryt i en Reset-knappen.

10-Photoshop-funktioner-9.jpg

10. Må alla dina Ellipser förvandlas till cirklar

För att rita en cirkel med den elliptiska markeringsramen eller en cirkel form, hålla Skift-tangenten när du har börjat teckning och ellipsen blir en cirkel. Om du vill rita från mitten och utåt, håll Alt-tangenten (Alternativ på Mac) när du börjar rita en ellips, tillsätt sedan Skift för att göra det till en cirkel - fortsätter att hålla båda knapparna tills du släpper den högra musknappen.

10-Photoshop-funktioner-10.jpg

Dela