Меню сайта
Наш опрос
...
Статистика
Онлайн всего: 1
Гостей: 1
Пользователей: 0
Друзья сайта
| Главная » Статьи » Дизайн » Дизайн сайтов |
Wordpress дизайн
| Создаем холст и направляющие Создаем новый документ 1200 x 1520, заливаем цветом: #e6e6e6.  Сам сайт будет шириной 900px, так что нужно установить соответствующие направляющие (guides). Выберите "view > new guide”(Просмотр > Новая направляющая) из верхнего меню, в выпадающем окошке введите такие же значения, как на скриншоте.  Проделайте это еще раз, но используйте другие настройки:  Создаем шапку Выберите инструмент прямоугольное выделение (rectangular marquee tool), выделите область шириной во весь холст, высотой 80px . Создайте новый слой. Залейте выделение любым цветом, а затем примените следующие стили слоя.    Должно получиться так:  На левой стороне напишите заголовок и слоган блога, цвет шрифта: #979797. Теперь добавьте тень к тексту, следуя настройкам ниже.  Заголовок:  Создаем навигацию Используя инструмент Текст (Text tool), добавьте ссылки в правую часть шапки.  Инструментом rounded rectangle tool, создайте выделение вокруг ссылки, как на картинке ниже.  Создайте новый слой. Залейте выделение любым цветом и примените следующие стили слоя.    Повторите последние два действия для каждой ссылки. Вот, что мы в итоге должны получить.  Создаем "приветствие" Инструментом rectangular marquee tool выделите прямоугольную область под заголовком. Убедитесь, что выделение находится в новом слое, под шапкой.  Залейте выделенный прямоугольник любым цветом и примените стили слоя как на скриншотах.    Должно получиться так:  Теперь давайте добавим персонажа из «wefunction», кликните по ссылке (http://wefunction.com/2008/11/free-character-pack/) и скачайте архив с персонажами. После этого извлеките из архива файл "002__002.eps”, откройте его в Photoshop’е. Перетащите персонажа на макет и расположите как на скриншоте ниже.  Обрежьте ему ноги прямо перед обводкой. Инструмент - Crop.  Теперь добавьте тень, используя такие настройки.  Справа от персонажа, добавьте пару предложений, описывающих ваш блог.  Создаем зону для "контента" Выберите инструмент «прямоугольное выделение» (rectangular marquee tool), создайте выделение на правой стороне холста . Прямоугольник должен быть примерно 600 пикселей шириной, длину выберите произвольную, вы в любой момент можете изменить ее, в зависимости от количества содержимого.  Создайте новый слой. Залейте выделение любым цветом и добавьте следующие стили слоя.    Создайте новый слой под слоем с содержимым, затем выберите инструмент «Лассо» (polygonal lasso tool). В углу прямоугольника с содержимым создайте небольшой треугольник как на картинке ниже.  Убедитесь, что выделение не залезает на обводку зоны "приветствия". Залейте это выделение цветом #a9a9a9. Теперь у вас должно получиться следующее.  Пример поста в Wordpress Внутри зоны с содержимым добавьте несколько бессмысленных сообщений. Выберите инструмент Текст и напишите несколько заголовков в качестве образца, используйте цвет: #666666, размер шрифта 24pt. Под заголовком расположите мета-данные (имя, дату и время)  Под мета-данными добавьте однопиксельную линию. Теперь загрузите иконки с woothemes (http://www.woothemes.com/2009/09/woofunction-178-amazing-web-design-icons/). Справа от заголовка вставьте иконку и ссылку на комментирование.  Напишите какой-нибудь бессмысленный пост и добавьте картинку. Затем добавьте кнопку «Read More», используя кнопки с навигации. Так же я добавил кнопки с социальных сайтов для улучшения показателей.  Создаем Sidebar Меню будет слева, а не как во многих блогах справа. В меню я добавлю галерею flickr, напишу заголовок размером 18pt и цветом #666666.  Под заголовком галереи flickr добавьте несколько любых изображений, чтобы представить, как будет выглядеть галерея. Прежде чем мы продолжим создавать остальные элементы меню, добавим разделитель под галереей. Выберете инструмент rectangular marquee tool, создайте две однопиксельные линии, расположите их друг под другом. Закрасьте линии в два разных цвета. Для одной используйте белый, для другой темно серый. Наконец, разместите разделители как на скриншоте ниже.  Продолжайте наполнять ваш Sidebar. Я добавил последние комментарии и ссылки на спонсоров.   Создаем подвал Скопируйте зону приветствия и перетащите ее вниз холста. Откройте стили слоя и поменяйте местами цвета обводки и внутренней тени. Убедитесь что верхняя белая линия, находится под темно-серой линией, иначе у вас получится эффект «зазубренности».  В левой части подвала вставьте иконку твиттера и пузырь для текста. Его можно взять в стандартном наборе фигур Photoshop (custom shapes).  Напишите в пузырь любой текст и добавьте заголовок над пузырем. Справа напишите контактную информацию, и можно добавить еще одного персонажа из wefunction.  Нумеруем страницы Выберите инструмент rectangular marquee tool или the rectangle tool. Нарисуйте несколько квадратов над обводкой подвала. Используя такой же метод, как когда мы делали наш content box , добавьте к ним треугольники чтобы они выглядели заворачивающимися за обводку подвала.  В правой части подвала добавьте один квадрат со стрелкой внутри , используя все тот же способ что сделать его объемным.  Ну, вот и все. Финальный результат. 
Источник: http://demiart.ru/forum/index.php?showtopic=121417 | |
| Просмотров: 567 | Теги: | Рейтинг: 0.0/0 |
| Всего комментариев: 0 | |