Mannodesign

Ко вчерашней иконке Twitterman нарисовала пару — Twittergirl. Размеры оставила лишь 256х256, 128х128 и 64х64. Мельче делать не стала, так как детали пропадают. На очереди еще несколько интересных образов. Выложу потом общей кучкой.

Скачать набор иконок Twittergirl (download)

Предлагаю вашему вниманию новую иконку для Twitter — Twitterman. Деловая птичка, с галстуком и в кожаных туфлях ручной работы от Fratelli Borgioli. Размеры стандартные: 256х256, 128х128, 64х64, 32х32. Все картинки в формате PNG.

Скачать набор иконок Twitterman (download)

Хотела еще сохранить их в формате ICO, но что-то ФШ глюкнул и перестал видеть этот формат. Если кому-то нужны иконки в данном формате, пишите в комментах, я что-нибудь придумаю.

В новый год с новыми идеями! Именно такой настрой должен быть у каждого уважающего себя креативного хомо сапиенса, к числу которых веб дизайнер относится в первую очередь. Почему в первую? Да просто потому, что без Интернета современным мир немыслим. Современный человек практически живет в нем. Кто-то погружен на все 100%, а кто-то просто следует тенденциям и пользуется массой предоставленных Интернет-услуг потому что это удобно, стильно и в чем-то даже полезно. Это и не хорошо и не плохо, это просто есть. А раз есть, то веб дизайнеру и карты в ручки.

Какие же тенденции в веб-дизайне следует ожидать в наступившем 2010 году?

Прежде всего, продолжится активная интеграция сторонних сервисов в содержимое веб сайтов. Flickr, Facebook, Twitter, YouTube, аудио и видео подкасты — без этих фишек современный сайт выглядит если не бедно, то уж точно не в ногу со временем. В буржунете это зовется емким словом lifestream — жизненное, текущее, «я в теме». Соответственно, появляется масса новых и интересных решений по внедрению всего этого добра в дизайн сайта. Вот, к примеру, способы отображения активности в качестве твиттерянина:

Читать далее…

Скоро скоро Новый Год! Креативные вебмастера спешать украсить свои блоги соответствующими иконками по теме. Я собрала небольшую коллекцию новогодних иконок, которые можно скачать совершенно бесплатно.

С наступающим! :)

1. Free Smashing Christmas Icon Set

2. Santa Claus Hat Emoticons

3. Xmas pack

4. Christmas icon

5. Christmas Icons by Archigraphs

6. Christmas Icons by Artdesigner

7. Merry Christmas Icons by jj-maxer

8. Santa Claus Icons by Fast Icon

9. Christmas Vector Icons pack

Идея данного поста возникла после очередного посещения моего любимого онлайн журнала Smashingmagazine, где в посте «50 Beautiful Watercolor Paintings» представлен ряд замечательных акварельных работ разных авторов:

Но при чем тут веб-дизайн, спросите вы? Те, кто давно уже читает мой блог, знают, что я просто обожаю гранж и ретро стиль в дизайне. Поэтому все, что нарисовано от руки, меня жутко завораживает и заряжает креативными идеями. Акварель в этом плане — просто идеальный инструмент! Вот посмотрите, например, какой замечательный дизайн для шаблона Вордпресс получился у Альваро Гузмана (Alvaro Guzman):

А посмотрите, какой потрясающе красивый диз получился у Ника Ла (Nick La) в его обновленном n.design studio:

Лично меня такие работы подталкивают на необдуманные действия к тому, чтобы выудить из стола старую коробочку с акварельными красками «Ленинград», да вспомнить подзабытые уроки с курсов начинающих любителей-живописцев, посещала которые лет несколько назад.

А что вы думаете об использовании рисованных акварельных элементов в дизайне сайта? Является ли это избыточным изыском или наоборот — эффектной фишкой в дизайне?

Как и любого сознательного веб-дизайнера меня волнует не только то, как работать, но и на чем собственно работать. То есть, какие железки использовать и почему именно эти, а не какие-либо иные.

На заре моей веб-дизайнерской деятельности был у меня замечательный такой CRT моник от Mitsubishi серии DiamondPro. 19 дюймов. В CRT корпусе это был такой внушительный агрегат, занимавший львиную долю моего уютного уголка. Однако время не стоит на месте. Моник тот благополучно кончился в самый неподходящий момент, и мне пришлось искать новый. Сегодня CRT – жуткая редкость. Просто так в компьютерном магазине не купишь. Да и нет особой на то нужды. LCD рулят! Но не каждый из них подходит для дизайнера.

Сейчас у меня дома живет Samsung F2080. Выбирался он долго и тщательно. Прежде всего я перерыла в Интернете всевозможные форумы по теме выбора LCD монитора для веб-дизайнера. Не вдаваясь в мелкие подробности, выудила для себя, что мир жидких кристаллов делится на три четкие группы: для чайников, для продвинутых юзеров, для профи. Вообще о ЖК мониторах хорошо расписано в Вики.

К первой группе относятся все моники для «поиграть+посмотреть кино». Или иначе — TN матрицы. Они недороги и их много. Соответственно, есть где развернуться при выборе модельки. Подходят такие мониторы больше для игр и просмотра фильмов. В большей степени из-за их быстрого отклика. Отклик в веб-дизайне не настолько важен, как цвет или четкость изображения. А еще у TN матриц есть одна нехорошая черта: при изменении угла просмотра экрана появляются блики, и само изображение как бы «исчезает».

Ко второй группе относятся мониторы с матрицей типа PVA и MVA. Мой нынешний моник как раз отсюда. Такие матрицы характеризуются гораздо большими углами обзора, при которых изображение остается четким, ярким и не бликует.

И наконец третья группа — мониторы с S-IPS матрицей. Дорогущие! Из найденных мной в интернет-магазинах, к примеру, NEC 2180UX стоит около $1к. Преимущество их состоит в еще более широких углах обзора, а также в передаче полной глубины цвета RGB — 24 бита.

Все это замечательно, бодро и весело. Однако вот в чем вопрос: а надо ли веб-дизайнеру приобретать дорогой монитор? Ведь, по сути, основная масса пользователей сети — это обычные граждане, с обычными, можно даже сказать «бытовыми» мониторами. И не получится ли в результате нечто обратное старинной русской поговорке — кашу маслом не испортишь? Быть может как раз наоборот — излишек масла может подпортить дизайнерские la capacité, так как конечный пользователь их попросту не заметит? Что бы вы посоветовали при выборе монитора для веб-дизайна?

Уроки фотошоп. Вы еще не в Twitter-е? Тогда мы идем к вам! :) А тем, кто уже в теме, предлагаю попробовать нарисовать для собственного блога прикольную картинку твишки-птички. Это полезно как в плане совершенствования навыков владения инструментом Перо (Pen Tool) в программе Фотошоп, так и в деле придания своему блогу неповторимой черточки. Приступим!

Прежде всего следует хотя бы в общих чертах набросать рисунок на обычном листке бумаги. Чтобы было от чего отталкиваться. Особыми художественными талантами при этом обладать вовсе не обязательно. Лучше нарисовать несколько различных образов, чтобы было из чего выбрать. У меня получилась вот такая стайка:

Теперь откроем Фотошоп и создадим новый документ с белым фоном. Почему не с прозрачным? Ведь иконку в конечном итоге желательно получить именно с прозрачным фоном, чтобы можно было прилепить куда угодно. Просто мне удобнее рисовать на белом фоне. Так лучше видно. А слой с фоном в конце работы можно просто выключить и сохранить рисунок в формате png.

Читать далее…

Автор статьи — Кирилл «Erlang» Панфилов. Специально для www.mannodesign.com

В веб-разработке, как и везде, есть своя мода. К счастью, веб-дизайнеры не собираются на помпезных показах и светских тусовках, о них не пишут скандальные таблоиды, поэтому новинки, тенденции и смелые находки нужно собирать в бесконечных поисках по дизайнерским блогам. Сегодня мы рассмотрим несколько современных практик, которые завоёвывают всё большую популярность.

1. Используем возможности CSS третьего уровня
Современные браузеры всё больше приближаются к CSS Level 3, которые направлены не только на гибкую вёрстку, но и позволяют более корректно распечатывать веб-страницы на принтере и воспроизводить их на звуковых устройствах, а также расширяют обычные возможности разметки. Например, сейчас в коде многих сайтов можно встретить такое:

::selection {
background: #600;
color:#FFC;
}
::-moz-selection {
background: #600;
color:#FFC;
}

Этот кусочек кода позволяет изменять цвет фона и текста, который вы выделяете на веб-странице мышкой. Вставьте эти строки в начало своего CSS-файла, выделите фрагмент текста, и вы увидите, что текст стал бледно-жёлтым на красивом бордовом фоне. Работает это, разумеется, везде, кроме браузера Internet Explorer 6: он оказался очень далёким от модных тенденций.

Мы бы, конечно, с удовольствием использовали и падающую тень от букв:

h1 {
text-shadow:0 1px 1px #363;
}

Но понимает такое свойство, к сожалению, похоже, только Opera.

2. Начинаем код с CSS-фреймворка
Фреймворк — это некоторый фрагмент кода, который позволяет решать часто используемые задачи. Те, кто программирует сложные веб-приложения, наверняка знают о таких программных фреймворках, как Yii, Zend, Kohana, CodeIgniter, Struts, Ruby и других (в них сразу реализованы и методы работы с базами данных, и системы безопасности, и процессы авторизации и регистрации пользователей, и обработка пользовательских данных). Если вы часто используете возможности языка JavaScript, то, вероятно, вы не обходитесь без фреймворков jQuery, Mootools или Prototype (динамическое построение веб-страницы, анимация и сложные эффекты, сравнимые с Flash). Сложно говорить о HTML-фреймворках, но вот CSS-фреймворки используются достаточно часто.

Что они делают? Обнуляют отступы, исправляют браузерные разночтения, касающиеся таблиц, границ и размеров, описывают часто используемые элементы. Например, я вёрстку всех своих проектов начинаю со вставки своего же небольшого фреймворка, который я не обновляю уже достаточно долго, потому что он решает все нужные мне задачи:

Читать далее…

Просмотрев внимательно содержимое своего бложика, я с удивлением обнаружила, что ни разу и ни словом не обмолвилась о тех полезнейших инструментах, которыми пользуюсь в своей веб-дизайнерской деятельности. Поэтому срочно исправляю данное недоразумение и, начиная с этого поста, буду периодически знакомить своих читателей со всевозможными полезняшечками и просто интересными инструментами и приспособлениями.

Речь идет, разумеется, не о рубанках, молотках и гвоздиках, а о различных программах и он-лайн сервисах, помогающих быстро и легко решить массу задач. Одной из таких задач для любого дизайнера, несомненно, является подбор или нахождение гармоничных цветовых сочетаний. Наверняка многие уже наслышаны про Kuler от Adobe.

Но зачастую в качестве вдохновителя выбирается какой-либо уже существующий сайт, и хочется разузнать, какие же цвета используются там. Можно, конечно же, сделать принт экрана и после в Photoshop пипеткой выцарапывать цвета по пикселю.

Можно также воспользоваться какой-нибудь микро-программой вроде Pixie или специальным плагином в FireFox.

Но я нашла более интересный способ. Это он-лайн сервис CssPrism.Com. Конечно, любую картинку он не представит в виде списка используемых цветов. В качестве исходного материала он использует css файл исследуемого сайта. То есть, ему достаточно скормить в качестве ссылки путь к этому файлу. И на выходе мы получаем красивую подборочку плашек с кодами цветов, которые применены на данном сайте.

Кроме того, если кликнуть по любой из плашек, то они все разворачиваются в более подробные описания с примерами отображения каждого из цветов на черном, сером и белом фонах. Очень наглядно и полезно. Рекомендую!

Уроки фотошоп. В современных Premium темах Вордпресс, да и просто в стильных и свежих дизайнах часто применяется очень интересный эффект границы двух блоков. Например, шапки и верхнего горизонтального меню. Простое использование контрастных фонов смотрится неинтересно и слишком упрощенно. Но если границе задать некое подобие тени и блика, то картинка разительно меняется.

Достигается подобный эффект добавлением вдоль граничащих блоков двух тонких, всего в 1 пиксель, полосок. Верхняя имеет более темный тон, чем фон блока, а нижняя наоборот — более светлый.

Для начала создадим в Фотошоп новый документ и зальем его каким-нибудь темным тоном. Например, #141417.

Читать далее…