2009 17 жовтня 2009

З Photoshop файл в HTML / CSS для WordPress серії

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

У серіалі він бере вас від дизайну процес створення веб-сторінки макета, в процесі нарізки і кодування - де CSS робить дизайн в життя. Потім він проведе вас через процес інтеграції, що код в CMS (система управління контентом), як WordPress. Таким чином, всі (повідомлень, кормів, оновлення) є динамічними і сайт у ширину. Я сподіваюся, що ви підписатися на його RSS-каналу, перевірити його інші блоги і насолоджуватися серії.

Я помітив, що я сподівався, що там була 4-й в серії, щоб показати нам процес в Prepping та кодування фотогалерея, контактна форма, корзина і Твіттері. Ми всі повинні перевірити назад, щоб подивитися!

Частина 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 8 липня 2009

ОК, повернемося до дизайну і Photoshop поради!

1. Відкриття файлу без використання меню

Simple. Двічі клацніть на сірій області фону вікна Photoshop і відкриття файлу з'явиться діалогове вікно - диво!?

10-фотошопа-функції-1.jpg

2. Якщо сірий Тупа, Чорний прекрасна і будь-який колір, тим краще!

Щоб змінити сірий всередині вікна зображення від сірого до чорного (або колір за вашим вибором), Ctrl + Right Click (Ctrl + Right Click на Mac) на область навколо зображення і виберіть колір.

10-фотошопа-функції-2.jpg

3. Передній план вибірки і квітів фону

Замість того, щоб натискати на передній план або фон зразок, щоб змінити колір на один вибірку з зображення, клацніть інструмент Eyedropper і клацніть на зразку кольору переднього плану - тримайте Alt (Option на Mac), щоб зразок нового кольору фону.

10-фотошопа-функції-3.jpg

4. Позиція форми або вибору

Коли ви малюєте форму або відбору та форма це добре, але позиція неправильна, утримати кнопку миші і утримуйте клавішу пробілу при переміщенні форми або виділення в потрібне положення. Відпустіть пробіл і продовжують робити фігуру.

10-фотошопа-функції-4.jpg

5. Отримати Вибір назад

Якщо ви втратили свій вибір, натисніть Ctrl + Shift + D (Ctrl + Shift + D на Mac), щоб отримати його назад. Ctrl + D (Ctrl + D на Mac) скасовує вибір.

10-фотошопа-функції-5.jpg

6. Приховати і зберегти

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

10-фотошопа-функції-6.jpg

7. Подивіться, що ви працюєте на

Це моя весь час найбільшим економить час! При перетягуванні великий шар з одного документа в іншій, ви можете переглянути весь шар і маркери по Ctrl + Click (Ctrl + клік на Mac) на іконці шару, щоб виділити його. Потім натисніть Ctrl + T (Ctrl + T на Mac), щоб подивитися в перетворенні ручки і Ctrl + 0 (нуль) (або Ctrl + 0 на Mac), щоб зменшити зображення таким чином, маркери, все видно.

10-фотошопа-функції-7.jpg

8. Стек або шикуються Палітри

Щоб стек панелі пліч-о-пліч в той же діалог, перетягніть одну палітру над іншими, поки синя лінія з'являється навколо неї і відпустити. Щоб стек палітри один на одного вниз екрану, перетягнути один палітри на бар трохи вище на інше ім'я палітри.

10-фотошопа-функції-8a.jpg

10-фотошопа-функції-8b.jpg

9. Немає кнопки Reset діалог? Так, є!

Ви можете скинути більшість Photoshop діалоги до вихідних налаштувань або, принаймні, деякі версії початкові налаштування, утримуючи клавішу Alt (Option на Mac), коли всередині діалогу - коли ви робите це, кнопку Відмінити перетворюється на кнопку скидання.

10-фотошопа-функції-9.jpg

10. Нехай усі ваші еліпси перетворюються на круги

Щоб намалювати коло, використовуючи Elliptical Marquee або форми кола, утримуючи клавішу Shift, як тільки ви почали малювати і еліпс стане колом. Щоб намалювати від центру до країв, утримуючи Alt ключ (Параметр на Mac), як вам почати малювати еліпс, потім додайте клавішу Shift, щоб зробити його кола - продовжувати утримувати обидві клавіші, поки ви відпустіть праву кнопку миші.

10-фотошопа-функції-10.jpg

Частка