2009 Окт 17 2009

От файл на Photoshop към HTML / CSS WordPress серия

Screen shot 2009-10-17 at 4.59.04 PM Пропусна да имат време да четат моите дневни блогове, като аз използвах, но се натъкнах на тази голяма серия от един от любимите ми: на Крис Coyier, чийто един сайт CSS-трикове ми помогна неимоверно.

В серията, той ще ви отведе от процеса на проектиране на уеб страница оформление, за нарязване и кодиране процес - когато CSS идват прави дизайна на живот. След това той ще ви отведе чрез процеса на интегриране на този код в CMS (Content Management System) като WordPress. По този начин всичко (постове, канали, актуализации) са динамични и сайт широк. Надявам се да се абонирате за RSS емисия си, проверете си други блогове и да се насладят на поредица.

Коментира, че се надявах там е 4-ти в серията, за да ни покаже процес в prepping и кодиране на фото галерия, форма за контакти, количката и Twitter фуражи. Ние всички ще трябва да провери отново да се види!

Част 1 започва от абсолютната нулата в Photoshop, само няколко предоставените ресурси от клиента. Ние проектираме началната страница и кожата за сайта.

Screen shot 2009-10-17 at 4.47.42 PM

Част 2 показва как да разделят дизайна от Photoshop в XHTML / CSS.

Screen shot 2009-10-17 at 4.47.28 PM

Част 3 показва как да го конвертира в шаблон на WordPress.

Screen shot 2009-10-17 at 4.45.57 PM

Дял

2009 Jul 8 2009

ОК, за проектиране и на Photoshop Съвети!

1. Отваряне на файл, без да използвате менютата

Simple. Кликнете два пъти върху сивата зона на фона на прозореца на Photoshop и за отваряне на файл се появи диалоговият - магия!

10-Photoshop-Функции-1.jpg

2. Ако е сиво, е скучна, черното е чудесно и всеки цвят е по-добро!

За да промените сивата вътре в прозореца на изображението от сив до черен (или с цвят по ваш избор), Control + Right Click (Ctrl + десен клик върху Mac) на района около изображението и изберете цвят.

10-Photoshop-Функции-2.jpg

3. Примерен преден план и цвят на фона

Вместо да кликнете на преден план или мостра на фон, за да промените цвета на взети проби от изображението, щракнете върху инструмента Eyedropper и кликнете, за да се вземе проба от цвета на преден план - задръжте Alt (Възможност за Mac), за да опитате нов цвят на фона.

10-Photoshop-Функции-3.jpg

4. Поставете във форма или подбор

Когато сте рисуване във форма или с подбор и формата е глоба, но позицията не е наред, задържане на бутона на мишката и задръжте клавиша за интервал, като се движите на формата или за избор в желаната позиция. Пуснете интервала и да продължи, за да направите вашия форма.

10-Photoshop функции-4.jpg

5. Получите селекция Обратно

Ако сте изгубили своя избор, натиснете Ctrl + Shift + D (Ctrl + Shift + D за Mac), за да го получи обратно. Ctrl + D (Ctrl + D за Mac) deselects селекцията.

10-Photoshop функции-5.jpg

6. Скрий се и се съхранява

Ако селекция е да ви пречат, Ctrl + H (Ctrl + H за Mac) ще скриете селекцията, но все пак го оставите на място. Не забравяйте да го включите отново, или може би се питате защо нещата не работят начина, по който очакваме от тях да работят.

10-Photoshop функции-6.jpg

7. Вижте какво, върху което работите

Това е цялото време най-голямото пестене на време! Когато плъзгате голям слой от един документ в друг можете да видите целия слой и неговото манипулаторите за оразмеряване с Ctrl + Click (Ctrl + Click на Mac) върху слоя за да го изберете. След това натиснете Ctrl + T (Ctrl + T за Mac), за да видите за превръщането на дръжките и Ctrl + 0 (нула) (или Ctrl + 0 на Mac) да се свие на изображението, така че манипулаторите за оразмеряване са видими.

10-Photoshop функции-7.jpg

8. Stack или линия до Палета

Да подредят палитри рамо до рамо в същия диалогов прозорец, плъзнете един палитра над останалите, докато се появи синята линия около него и да отидете. За да подредят палитри един на върха на другата надолу по екрана, плъзнете и пуснете една палитра върху бара, точно над името на друг палитра.

10-Photoshop-Функции-8a.jpg

10-Photoshop-Функции-8b.jpg

9. Не диалогови бутона Reset? Да, има!

Можете да възстановите повечето Photoshop диалози към първоначалните им настройки или поне някаква версия на първоначалните настройки чрез задържане на клавиша Alt (Възможност за Mac), когато вътре в диалоговия - когато правите това, бутона Cancel се превръща в един Reset бутона.

10-Photoshop функции-9.jpg

10. Нека всички си елипси превърне в Circles

За да начертаете кръг, с помощта на Elliptical Marquee или формата на кръг, задръжте клавиша Shift, след като веднъж сте започнах да рисувам и елипса ще се превърне в кръг. За да се изготвят от центъра, задръжте Alt ключ (Възможност за Mac), за да започнете да чертаете елипса, след това добавете клавиш Shift, за да го направи кръг - Задръжте и двата клавиша, докато не пусна десния бутон на мишката.

10-Photoshop функции-10.jpg

Дял