WordPress 3.0: Creating and Editing Custom Themes / WordPress 3.0: Создание и редактирование собственных тем оформления: 04 - Обзор активов и ресурсов, создание прочного фундамента
| Английский оригинал | Перевод на русский | |
|---|---|---|
Сожалеем, но текст оригинала доступен только зарегистрированным пользователям. |
Это только дял ощущения. shylep 16.10.11 в 18:34 и всё это здесь. Всё это создаёт настроение. NikitinC 01.11.11 в 13:17 |
|
|
Но мы собираемся сделать это для Widget Corp. shylep 16.10.11 в 18:35 Мы собираемся накидать такой же проект для "Widget Corp.", NikitinC 01.11.11 в 13:17 |
||
|
имея свой собственный фундамент. shylep 16.10.11 в 18:36 создать собственный "прочный фундамент". NikitinC 01.11.11 в 13:17 |
||
|
Я собираюсь создать новый файл в Photoshop и задать ему некоторые свойства shylep 16.10.11 в 18:38 |
||
|
размерности в пикселях. shylep 16.10.11 в 18:38 |
||
|
Получим файл нашего изображения с белым фоном. shylep 16.10.11 в 18:42 |
||
|
Белый цвет не так уж плох. Я имею в виду что белый цвет немного холодный и расслабляющий, и shylep 16.10.11 в 18:44 |
||
|
корпоративный. С ним не бывает проблем. shylep 16.10.11 в 18:44 |
||
|
Возможно, что и контент на нашем сайте будет белый, но мы поработаем над цветом фона. shylep 16.10.11 в 18:45 |
||
|
Возьмем инструмент "Прямоугольная область" и создадим прямоугольник, shylep 16.10.11 в 18:46 |
||
|
который будет показывать наш фоновый цвет. shylep 16.10.11 в 18:47 |
||
|
Возможно он будет нейтрально серым, немного темнее. shylep 16.10.11 в 18:48 |
||
|
Теперь, когда у нас есть два фоновых цвета как здесь, далее каждый из них будет немного скучным. shylep 16.10.11 в 18:51 Теперь у нас есть два фона вроде этих, и каждый из них сам по себе скучен. NikitinC 01.11.11 в 13:20 |
||
|
Это маленькая плоскость. shylep 16.10.11 в 18:54 Они немного "простоваты". NikitinC 01.11.11 в 13:20 |
||
|
Давайте зададим этому фону немного "шума" - думаю что 2% будет достаточно shylep 16.10.11 в 18:56 Давайте, добавим к ним немного шума, просто добавим и немного увеличим, NikitinC 01.11.11 в 13:21 |
||
|
PS: парень много говорит не по делу, shylep 16.10.11 в 19:00 накидав немного текста. NikitinC 01.11.11 в 13:21 |
||
|
поэтому далее в местах "словесного понса" shylep 16.10.11 в 18:59 А теперь мы можем добавить много шума, и здесь важно NikitinC 01.11.11 в 13:23 |
||
|
буду просто использовать - "бла - бла - бла", shylep 16.10.11 в 19:00 не переборщить, но поскольку мы работаем в холодных NikitinC 01.11.11 в 13:23 |
||
|
и дальнейший перевод будет носить "вольный" характер, shylep 16.10.11 в 19:00 цветах, нужно лишь по чуть-чуть добавлять шума, NikitinC 01.11.11 в 13:23 |
||
|
т.е. будет содержать только суть вопроса. shylep 16.10.11 в 19:00 пока не добьёмся интересной картинки. NikitinC 01.11.11 в 13:24 |
||
|
Любители "дословного превода" могут shylep 16.10.11 в 19:04 Вот так, вроде бы, довольно аккуратно смотрится содержимое, NikitinC 01.11.11 в 13:24 |
||
|
использовать субтитры первоисточника. shylep 16.10.11 в 19:04 и оно отделено от фона. NikitinC 01.11.11 в 13:25 |
||
|
Откроем файл изображения логотипа в Photoshop shylep 16.10.11 в 19:10 Теперь поработаем с логотипом, для чего откроем его в Photohop. NikitinC 01.11.11 в 13:25 |
||
|
Перенесем логотип в файл нашего проекта, используя инструмент "перемещение". shylep 16.10.11 в 19:11 |
||
|
Для трансформации изображения можно использовать сочетание клавиш "Ctrl + T". shylep 16.10.11 в 19:13 |
||
|
Cочетание клавиш "Ctrl + 0" отобразит полный размер изображения, к которому применена команда "трансформация". shylep 16.10.11 в 19:15 |
||
|
Удерживая клавишу "Shift" будем пропорционально изменять размер изображения. shylep 16.10.11 в 19:16 |
||
|
Всё! Больше я ничего здесь делать не буду. NikitinC 18.10.11 в 19:48 |
||
|
Итак, первым делом я запомнил, что этот логотип хорошо смотрится на чёрном, NikitinC 18.10.11 в 19:49 |
||
|
также хорошо, как и на белом. Это интересное замечание. Если наш логотип не NikitinC 18.10.11 в 19:50 |
||
|
способен на это, нам минус. NikitinC 18.10.11 в 19:50 |
||
|
Второе, что я здесь заметил, это отделение одной части NikitinC 18.10.11 в 19:51 |
||
|
контента от другой. NikitinC 18.10.11 в 19:51 |
||
|
На корпоративном сайте вроде этого, вполне хватит одного пикселя, мне так кажется. NikitinC 18.10.11 в 19:52 |
||
|
Инструментом "Линия", удерживая клавишу "Shift" нарисуем линию отделяющую область "шапка" от контента shylep 16.10.11 в 19:22 Попробуем сотворить подобное. Я беру инструмент "Линия". Теперь собираюсь удерживать Shift NikitinC 18.10.11 в 19:53 |
||
|
и нарисовать прямую линию. NikitinC 18.10.11 в 19:53 |
||
|
И это довольно мило. Так можно отделять заголовок от нашего NikitinC 18.10.11 в 19:53 |
||
|
футера, или сообщения блога друг от друга. Но что-то я не уверен. NikitinC 18.10.11 в 19:54 |
||
|
И когда я вижу один пиксель навроде этого, постоянно думаю о Helvetica NikitinC 18.10.11 в 19:54 |
||
|
Neue с их ультра тонким шрифтом. Думаю, он здесь хорошо будет смотреться. NikitinC 18.10.11 в 19:55 |
||
|
Используя инструмент "Текст" создадим надпись с названием фирмы WIDGET CORP, используя шрифт "Helvetica". shylep 16.10.11 в 19:25 |
||
|
И немного "подгоним" размер текста под размер шапки сайта shylep 16.10.11 в 19:26 Он выглядит как линия в один пиксель, и это нам подходит. NikitinC 03.11.11 в 12:35 |
||
|
С этим можно немного поиграться. Поскольку мы не сразу создадим дизайн сайта, NikitinC 01.11.11 в 12:40 |
||
|
а только "начало" такового, можно подгонять фигуры. NikitinC 01.11.11 в 12:41 |
||
|
Мы просто накидаем какой-то материал на страницу и получим чувство "настроения". NikitinC 01.11.11 в 12:41 |
||
|
Вот и всё дело. NikitinC 01.11.11 в 12:42 |
||
|
Поиграем немного настроением, посмотрев на найденны в iStockphoto, NikitinC 01.11.11 в 12:42 |
||
|
файл. Я назову его "почтовые отметки". NikitinC 01.11.11 в 12:43 |
||
|
Я нажму здесь на пробел, смотрите, всё здесь выглядит NikitinC 01.11.11 в 12:43 |
||
|
будто бы пришло по обычной почте, великолепно NikitinC 01.11.11 в 12:43 |