Графика

  • 08 09.08

    Как нарисовать тень от куба

    Это очередной урок по перспективе и, по совместительству, по теории теней. Допустим куб вы уже нарисовали (если нет, то смотрим урок по рисованию куба). Вот такой у меня куб: Первое, что необходимо, для построения тени, нужно определиться, откуда будет светить солнце или другой источник света. Необязательно «солнце» должно находиться выше линии горизонта. Если оно ниже, то оно может...

    » Читать полностью » Комментарии (12)
  • 14 07.08

    Обзор графических программ для MacOS X

    Небольшой обзор графических программ для MacOS X, которые впечатлили меня в последнее время. Поиск программ проводится с целью найти достойные альтернативы продуктам Adobe. Конечно такие же многофункциональные комбайны найти не удалось, но те что я сейчас перечислю, действительно достойны внимания. VectorDesigner Графическая программа для создания и редактирования векторной графики,...

    » Читать полностью » Комментарии (8)
  • 07 03.08

    Видеоурок: Рисуем куб в перспективе. Результаты конкурса.

    Когда-то я затрагивал тему перспективы. Кто-то узнал о ней, кто-то освежил в памяти. Но теория должна подкрепляться практикой. Руководствуясь этим скринкастом можно легко научиться рисовать трехмерные объекты с простой линейной двухточечной перспективой в пакетах двухмерной графики. Долго искал бесплатный софт для редактирования сего произведения, в итоге использовал Windows Movie Maker....

    » Читать полностью » Комментарии (10)
  • 08 01.08

    Photoshop Action для создания Ajax-иконки

    Создал Action, который делает следующее: Проходит по восьми слоям и изменяет им прозрачность, Экспортирует картинку в gif, Повторяет действие восемь раз с изменёнными значениями прозрачности для каждого раза. В этоге экспортируется восемь картинок. Что нужно сделать вам? Скачайть action-файл и psd-файл. Action-файл киньте в папку [Adobe Photoshop folder]/Presets/Photoshop...

    » Читать полностью » Комментарии (10)
  • 11 12.07

    Перспектива

    Существует несколько видов перспективы, о которых помнят не все художники и дизайнеры, порой ограничиваясь рисунком в диметрии. А кто-то, возможно, знает о них, но пользоваться не умеет или не понимает необходимости. Думаю, многим будет полезно расширить свои знания понятием о перспективе и её видах. Рисовал в Corel Draw, так что если захотите сами такое творить, то используйте векторные...

    » Читать полностью » Комментарии (21)
  • 10 09.07

    Ломаный градиент и стеклянная кнопка Mac OS X

    Градиент - очень мощный инструмент, это знают все. Но управление переходом из одного цвета в другой функционал градиента не ограничивается. Комбинируя градиенты (не цвета) можно добиться всевозможных иллюзий объёма. Как вариант: использование ломанного градиента добавляет ощущение угловатой объемности элемента. Вариантов для экспериментов много, причём они могут зависеть не только от выбора...

    » Читать полностью » Комментарии (10)
  • 01 09.07

    Особенности градиента и его использование

    "Web 2.0 стиль" (если его можно так назвать) дал второе дыхание дизайнерам питающим неравнодушие к градиентам. Из знаменитой статьи Web 2.0 how-to design style guide мы знаем, что градиенты нам даны не только для того, чтобы сделать рисунок более объёмным или придать фону страницы эффект отдаления от содержимого страницы, но и для того, чтобы игра градиентов создавала яркое настроение всему...

    » Читать полностью » Комментарии (8)
  • 04 08.07

    Остров. JavaScript события для групп однотипных объектов.

    Настроение было порисовать. Но вообще статья будет не о графике, а о коде. События JavaScript Те кто изучал JS знают, что в основном события пишутся внутри тэга как атрибуты и применяются к конкретному элементу. Например: <div id="someblock" onmouseover="this.backgroundColor='#eee'; onmouseout="this.backgroundColor='#fff' ">-----</div> Помещая курсор мышки над блоком,...

    » Читать полностью » Комментарии (4)
  • 01 08.07

    Re:boot. Что такое PNG формат? PNG в IE.

    Теперь seleckis.lv будет иметь вид и формат журнала. Посты посвящённые web-дизайну, айдентике, полиграфии, флэш-анимации и Action-скрипту, программированию, а так же различным новостям в области дизайна, программирования и мира Web 2.0. Старые записи останутся (куда же они денутся) в том виде, в котором вы привыкли видеть блог-посты, но будут доступны в разделе Архив. Редизайн коснулся и их,...

    » Читать полностью » Комментарии (32)
  • 09 02.07

    Web 2.0 и люди

    Интернет уже не такой, как был раньше. Сейчас вам не будут пытаться доказать, что интернет вызывает зависимость (я имею ввиду клиническую зависимость). Раньше деловые люди придя на работу, первым делом проверяли мэйл и читали новости на любимом новостном сервере, а сейчас они первым делом запускают свой любимый RSS-reader или что-то аналогичное в интернете (например: персональные...

    » Читать полностью » Комментарии (0)
Google     
27 05.10

Вёрстка в Латвии: Вчера. Сегодня! Завтра?

Версия моего выступления на Web Standards Days Riga 2010 вызвавшего неоднозначную реакцию. Много было регистраций работников различных дизайн студий, компаний занимающихся разносторонней веб-разработкой, банков, министерств, фрилансеров и просто интересующихся. Я не зря добавил в форму регистрации поле для адреса сайта. Те люди, что собрались на конференцию, скромно говоря, флагманы, пионеры латвийской веб-разработки. Поэтому не грех было покопаться в их работах и попробовать понять, что же всё-таки у нас происходит с текущим использованием технологий? Статистика вещь интересная, но только если она связанна с интересными темами. Мне было интересно заняться небольшим статистическим анализом, результатами которого я с вами сейчас поделюсь. Конечно в дебри я не полез, из-за большой лени, но то, чего успел накопать хватает достаточно, чтобы составить небольшую рекомендацию, с чего стоит начать осовременивать свою вёрстку. Вчера Итак, что же можно назвать «вчера»? ASCII...

Категории: Исследования | Брaузеры | Статистика | xhtml/xml | htmlТэги: » Читать полностью » Комментарии (12)
09 02.10

Восприятие информации по горизонтали и вертикали

Почему мы воспринимаем информацию слева направо и сверху вниз (как говорят некоторые «буквой Z»)? Правильно, потому что мы так пишем. Так пишет добрая половина человечества, а создатели компьютеров «навязали» такой стиль и восточным народам (хотя те и сопротивляются). А почему мы так пишем? Да потому что писать справа налево неудобно так же как писать левшам слева направо. Мы же себе строчку рукой закрывать будем! «Лево-право, право-лево…» © Фунтик Т. е. вывод какой? Виновата физиология, а не мозги (у востока — наоборот). Посмотрим правде в глаза… человека: Если вы не знали, то глаза находятся на одной горизонтали и угол обзора по горизонтали больше, чем по вертикали. Соответственно в обзор попадает гораздо больше информации располагающейся по горизонтали, а не по вертикали. В силу опять-таки особенности физиологии человеческого глаза, мышцы двигающие глаза по горизонтали гораздо сильнее (или более развиты, не знаю как правильно), чем те, что двигают глаза по вертикали....

Категории: Веб‑дизайн | Usability | Разработка сайтовТэги: » Читать полностью » Комментарии (9)
25 08.09

Всемирная HTML 5 истерия

Я не знаю, об этом просто сейчас модно писать или народ действительно в восторге? На самом деле, я бы с удовольствием, присоединился к толпе ликующих, если бы событие произошло год назад, именно тогда я написал статью «HTML должен быть…». Чему всё-таки радуется человечество? Например, одна из самых распространённых тем в блогах, это новые тэги: header, footer, nav, article, aside, section и др. Очнитесь ребята! Эти тэги можно было использовать с тех пор как регламентировали стандарт xhtml! Все бразуеры, кроме IE воспринимали их как строчные элементы, а с помощью CSS их можно сделать блочными. Ну да, Internet Explorer… Но почему только когда официально консорциум объявил об отказе от XHTML 2.0 (кстати, я это пророчил), появился простой и понятный код, решающий эту проблему? document.createElement("header"); Это тоже работа группы WHATWG? Ах, да! Ещё и Firefox 2, в котором работают эти тэги, но только в режиме парсинга xhtml+xml. Это большая проблема, которая решилась...

Категории: ЖурналТэги: » Читать полностью » Комментарии (11)
16 08.09

Seleckis’ method vs Pixy’s method

Честное слово, пытался найти и убедить себя в том, что этот метод уже существует. Не нашёл. Исправьте меня если я не прав. Pixy’s method отображение картинок с надписями заключался в том, чтобы внутрь блока с текстом поместить пустой <span>, и вставить картинку как фон для этого span-а. Причём, для того чтобы текст показывался в случае если картинки отключены, необходимо span поместить поверх текста. В методе Pixy, для того чтобы <span> с картинкой налез на текст используется абсолютное позиционирование. В таких условиях кнопка не может находиться в строке, она может существовать только как блочный элемент. Почему? Потому что Firefox 2 не поддерживает свойство «display: inline-block». Для отображения блока в строке в Firefox-е используется проприетарное свойство «display: -moz-inline-box» или «display: -moz-inline-stack». Но в таком случае браузер не совсем адекватно позиционирует помещённые внутрь элементы. В частности некорректно работает абсолютное...

Категории: CSSТэги: » Читать полностью » Комментарии (9)
06 08.09

Min-width и max-width в IE6 с помощью expression

Уже писали много раз, просто приведу свой код. В JavaScript-файле размещаем такую функцию: function width(min,max){ w = document.documentElement.clientWidth; return (w = max) ? max + "px" : "auto"); } Функция всего лишь принимает значения максимальной и минимальной ширины, проверяет текущую ширину документа и возвращает значение: Если ширина документа меньше минимальной ширины, то возвращается минимальная ширина; Если ширина документа больше максимальной ширины, то возвращается максимальная ширина; Иначе ширина указывается автоматическая. Функция из CSS вызывается следующим образом: div { width: expression(width(600,1000)); /* далее для нормальных браузеров */ min-width: 600px; max-width: 1000px; } 600 и 1000 — минимальная и максимальная ширина. Поскольку expression работает только для IE, а min-width и max-width уже работают в IE7 и IE8, то этот CSS нужно изолировать и вынести в отдельный css-файл и подключить его с помощью...

Категории: Брaузеры | CSS | JavaScriptТэги: » Читать полностью » Комментарии (7)
31 07.09

«Резиновое» поле ввода в форме

Как известно у полей ввода ширина не может рассчитываться автоматически относительно контейнера, как это работает у блочных элементов. Значение ширины можно задать фиксированное, либо относительное. Есть сервисы в интернете с полями ввода (например, поиском) у которых ширина задана фиксированно. Соответственно, если шаблон сайта резиновый, то поле ввода растягиваться не будет. Как правило такие сайты имеют фиксированную вёрстку. К примеру, если вы зайдёте на «Yahoo Answers» и с помощью Firebug (Firefox), Web Inspector (Safari, Chrome) или Developer Tools (Opera, IE8) отключите у элемента <div id="y-ks-whole-page"> свойство «width: 750px;» в стилях, то сайт растянет на всю ширину, а поле поиска вопросов останется той же ширины. Конечно, кроме всего прочего, некоторые другие элементы останутся фиксированными, но мы говорим о полях ввода. И вспомним работу студии Артемия Лебедева, поисковик «Яндекс» и его страницу ya.ru — облегчённую версию поисковика или посмотрим на давно...

Категории: CSSТэги: » Читать полностью » Комментарии (23)
28 07.09

Элементы управления в веб-сервисах

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

Категории: Веб‑дизайн | Usability | Разработка сайтовТэги: » Читать полностью » Комментарии (6)
17 03.09

Навигация веб-сервисов и социальных сетей

Меня удивляет непоследовательность разработчиков интерфейсов различных социальных сетей и веб-сервисов в организации навигации. Простая и понятная навигация встречается на очень редких сайтах. Это свидетельствует о том, что в разработке не участвуют специалисты по юзабилити, либо по каким-то техническим, экономическим, амибициозависимым соображениям их рекомендации не берутся во внимание. Конечно я допускаю мысль о том, что часто изначально разработчики сами не знают какие функции будут доступны в их детище. Разработка циклична и возможно некоторые функциональные особенности будут со временем убраны или реорганизованны. В любом случае в такого рода разработке нужен системный подход. В этой статье я расскажу, как я вижу сложную навигацию веб-сервиса (на примере социальной сети). Как правило, социальная сеть состоит из пользователей, и содержимого, которое эти пользователи создают. Поэтому мы можем представить их взаимоотношение такой схемой: Если раскрыть значение этих...

Категории: Исследования | Usability | Разработка сайтовТэги: » Читать полностью » Комментарии (5)
28 02.09

Строчная кнопка как кнопка submit

Требуется создать строчную кнопку submit неопределённой ширины с фоновой картинкой. Почему это нельзя сделать стандартными средствами? Т. е. мы конечно можем поместить на страницу кнопку и спокойно её использовать. Но нет, нам же этого мало. Нужно чтобы кнопочка была красивая, градиентная, с закруглёнными уголками. Стандартным способом мы можем указать фон для кнопки, добавить рамочку и в браузерах FF и Safari добавить закругления. Но проблема в том, что это во-первых не будет работать в IE и Opera, а во вторых, размеры кнопочек, положение текста и отступы везде будут разные. В FF2 вообще фон вылез за край закруглений. Можно попробовать поместить кнопку submit в элемент span, чтобы использовать метод Sliding Doors. В этом случае можно будет без проблем поставить в качестве фона картинки как для элемента «span», так и для элемента «input». Но к сожалению и этот способ не подойдёт, поскольку нет возможности адекватно выровнять текст по...

Категории: CSSТэги: » Читать полностью » Комментарии (16)