Блог о дизайне

Величественный вечный огонь в картинках

yuzer — Wed, 28 Jul 2010 06:46:25 +0000

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

В праздники, которые посвящены Великой Отечественной войне вечный огонь в картинках бывает очень актуальным. Ведь вечный огонь символизирует память, которая проносится через многие годы.

Данные картинки могут быть использованы на различных открытках, плакатах и афишах. Совмещая картинки вечного огня с теплыми словами можно таким образом поздравить ветеранов.

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

mmaxis.ru

Отрисовка изображения в фотошопе с нуля с помощью Pen Tool

yuzer — Wed, 28 Jul 2010 04:44:23 +0000

Сегодня в Дизайн Мании гостевой и очень практичный пост от веб-дизайнера Сергей Мишалов, который ведет дизайн блог о своей дизайнерской работе, делится опытом, советами и не только.

Урок на самом деле не сложный и ориентирован на новичков. Пентул (Pen Tool) — подручное средство каждого дизайнера, поэтому рано или поздно вам все равно придется осваивать инструмент. Лучше рано, чем поздно, от малого к большему.

Отрисовка у вас займет примерно 2 часа драгоценного времени, но практика никогда и никому еще не вредила. Целью урока является демонстрация произвольной работы с инструментом “Pen Tool” и дальнейшая обработка созданных форм. Я остановился лишь на “эскизном” варианте, учтите, что всегда можно доводить иллюстрацию до технического предела, не жалейте времени, качество того стоит, главное не переборщить.

Итак, первый этап включает в себя создание примитивных форм, используем исключительно Pen Tool. Буду надеяться, что техника вам уже знакома. Тут не надо торопиться и как можно меньше редактировать точки, чтобы форма в итоге получилась менее “угольной”.

Инструмент той же группы “Convert Point Tool” помогает править форму, зажимаете “Alt” и тяните точки как вам угодно.

1. Создаем общую форму. Наш пример похож на руку или туфлю, если приглядеться. После того как замкнули круг формы, нажимаем правый клик и выбираем “Make selection“

Заливаем поле цветом и двигаемся далее.

2. Снова берем пентул и рисуем крышу машинки или корабля, считайте как хотите. Заливаем светлым цветом и прикрепляем только что сделанную форму к нашей основе, чтобы ничего не торчало.

Далее как видите все слои связанные с формой будем крепить к нашей основе.

3. Далее рисуем вдавленную узкую часть, которая залита темным цветом, а сверху боковину, красим в цвет посветлее.

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

Вторым этапом является работа с свето тенью. Свет и тени я рисую мягкой кистью белого и черного цвета соответственно.

7. Рисуем засвет кончика крыла, оперируясь на лево-верхний источник света.

8.9.10. По тому же принципу побелил еще несколько частей.

11. Слегка затенил цвет реакторов, подтер мягкой кистью разделительную форму.

12.13.14. Переходим к теням. Затемняем все той же кистью, только черного цвета заднюю часть и еще нескольких мест, смотрите рисунок.

Следующим этапом являются цвет и детали.

15. Рисуем прозрачной кистью 15-20% прозрачности свечение от реактора, рассеянный свет, а где он необходим, аккуратно подтираем непрозрачным ластиком.

16. Рисуем голубой блик. Я применил инструмент “Polygonal Lasso Tool”

И далее размыл края фильтром “Blur > Gaussian blur”.

17. Рисуем такой же блик, только уже, ярче и четче.

18.-24. По тому же принципу и порядку делаем правый реактор.

25. Рисуем рефлекс, падающий от левого реактора на кончик крыла.

26. Дорисовываем фары со всех сторон, можете их акцентировать цветом.

27. Рисуем индикатор батареи.

28. И значек производителя.

Заключительные штрихи. С фоном я заморачиваться не стал, лишь размыл в движении (Blur > Motion Blur) и подогнал все под голубой тон. Вы, как я уже отписывал выше, можете довести иллюстрацию до более серьезного уровня.

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

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

design-mania.ru

Редактирование фотографий в Фотошопе просто и легко

yuzer — Tue, 27 Jul 2010 22:17:03 +0000

Редактирование фотографий в Фотошопе – очень важное дело, без которого не может обойтись ни один фотограф. Фотошоп является незаменимой программой, в которой за считанные минуты возможно обыкновенный снимок преобразовать в настоящий перл.

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

В фотошопе возможно изменение вида, размера, формы фотографии. А также преобразование фотографии в чудесные изображения с помощью различных фильтров. Фотографии приобретут оригинальность, изысканность и неповторимость.

Сделать клипарты, фотографии в рамках, в шаблонах, дорисовать необходимые детали – все это возможно в редакторе Фотошоп.

mmaxis.ru

Где лучше всего искать royalty free изображения и картинки

yuzer — Tue, 27 Jul 2010 19:02:13 +0000

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

Обычный поиск изображения в Google Image Search – картинок реально много, можно найти практически что угодно. В поиске картинок гугла есть некоторые опции, позволяющие отбирать изображения по цвету, размеру, качеству.Еще одна моя статья бесплатные иллюстрации для блога расскажет где также можно найти картинки кроме поисковиков. Ну, и последний вариант – купить изображения.

Понятно, что покупка не сильно дешевый выход, зачастую качественные изображения могут стоить достаточно дорого, тем не менее, выход есть, и называется он – royalty free photos. Это такой вид лицензирования изображений, при котором фотография может продаваться неограниченное количество раз. Хотя при этом все права на фото остаются у его автора, что получает за использование фиксированный (неизменяемый в дальнейшем) гонорар. После оплаты вы сможете использовать картинки как и где захотите.

Не смотря на то, что понятие royalty free все же не означает бесплатные изображения, как я думал, в нем есть ряд существенных преимуществ.

Небольшая стоимость картинок, как правило $1-$5.Простота покупки в фотобанках.А также возможность использовать фото несколько раз, о чем я уже сказал выше.Огромнейший выбор во всех крупных фотобанках мира – думаю, миллиона royalty free изображений вам хватит вполне.

К недостаткам royalty free изображений можно отнести не всегда (относительно) высокое качество снимков (для иллюстрации блога фотки с мыльницы будет достаточно), использование изображения другими пользователями (не эксклюзивные фотки). Хотя, думаю, в большинстве случаев достоинства royalty free картинок все же перевешивают.

На одном англоязычном сайте нашел статью про то где можно найти много качественный royalty free фоток. Вам будет интересно знать даже, если вы особо не настроены тратить деньги на картинки (но об этом чуть позже).

Getty Images

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

Итак, вбиваем в поиске gettyimages нужное нам ключевое слово, например, «computers». При наведении на картинки или при клике на них вы увидите защитный «водяной знак», который появляется в верхнем левом углу.

Сохранив эту картинку на компьютер можно будет потом в фотошопе просто отрезать ненужную ее часть. В том же gettyimages есть много фоток, где этот процесс не только не повредит качеству картинки, но и будет вообще незаметен!

Кроме того:

В некоторых сайтах водяной знак на изображении может быть отображен снизу, а картинка при этом быть доступной в разных фотостоках – совместив обе части в фотошопе вы получите полноценное небольшое изображение:)Иногда при наведении в превью фото не имеет никакой защиты. Бывает, что при клике на изображении для подробного описания показывают миниатюры до 400-500 пикселей без каких или водяных знаков (продаже подлежат картинки в полноценном размере).

В общем, все зависит от конкретного фотостока, который сейчас достаточно много. Но, возвращаясь к теме royalty free фоток, предлагаю посетить еще такие ресурсы.

Search Creative Commons

Последний сервис позволяет искать нужные вам изображения на нескольких сайта – это и Google, и Flickr и некоторые другие проекты. Причем, насколько я понял, используется механизм поиска выбранных интернет проектов, а также старается находить картинки, что распространяются по свободной лицензии Creative Commons. Хотя разработчики призывают этот факт проверять. В следующий раз расскажу как искать бесплатные фотки без лицензии для своих ресурсов.

design-mania.ru

Вредные привычки HTML верстки

yuzer — Tue, 27 Jul 2010 12:51:28 +0000

Давно в Дизайн Мании не было статей по тематике верстки, которая весьма и весьма актуальна для многих вебмастеров. Сегодняшний пост можно назвать в какой-то степени “обучающим” и полезным не только для начинающих верстальщиков, но и бывалых работников, которые не застрахованы от таких простых, но ненужных ошибок при HTML верстке. Вообще правильнее сказать даже не ошибки, а типичные вредные привычки и, то что называется, «плохая школа». Веб-дизайн — такая штука где до сих пор не существует 100% стандартов. Уже одно это является благодатной почвой для того чтобы каждый писал код так как заблагорассудится. Но, исправляться никогда не поздно! Давайте избавимся хотя бы от десяти распространенных пороков. Для каждой из вредных привычек HTML верстки вы также найдете небольшое пояснение, которое поможет понять почему нужно использовать тот или иной вариант.

Размещение блочного элемента внутри строчного

В HTML каждый элемент может быть представлен как строчный или блочный. Каждый тег по своей природе может быть блочным или строчным. Блочные детали составляют структуру документа, например DIV. Строчный элемент может размещаться внутри блочного, но не наоборот. Собственно, достаточно распространенная ошибка для некоторых начинающих оптимизаторов, которые добавляют ссылки в детали H1, H2 и т.п. Хорошо, что многие wordpress шаблоны используют правильную HTML верстку.

Отсутствие атрибута ALT для картинок

Атрибут ALT является необходимым элементном для каждого изображения размещаемого на веб-странице. Благодаря ему пользователь может получить представление о изображение, даже если он это изображение не видит (в браузере отключено отображение картинок или устройство не позволяет загружать/отображать изображения).

ALT должен описывать картинку, поэтому, использовать его в виде alt=”image” – неправильно. Если ваша картинка используется чисто в декоративных целях, можно оставить атрибут пустым (alt=”"), но присутствовать он должен в любом случае. Следует также заметить, что атрибут alt используется для поиска по картинкам, поэтому при оптимизации сайта данному аспекту нужно уделять отдельное внимание.

Неиспользование списков

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

Использование тегов и

Теги и превращают текст соответственно в написанный жирным (полужирным) и курсивным начертанием. По современным представлениям лучше для этих целей использовать или . Кстати, говорят, что для продвижение ресурсов лучше использовать именно последние обозначения, так как они имеют бОльший вес.

Многократный обрыв строки

Тег
который используется для обрыва строки должен использовать только однократно. Для всего прочего есть абзацы, параграфы и прочее, стиль которых должен быть задан в CSS.

Неправильное перечеркивание

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

«Стилизация» строчных элементов в HTML

Все веб-мастера 1000 раз слышали что «оформлять на месте» строчные детали неправильно. Таким образом теряется смысл семантического веб-дизайна. Если вы не можете задать стили всем элементам в CSS, значит вы не способны на грамотный дизайн.

Добавление или удаление границ в HTML

Тоже самое касается тега для элементов. Эти вопросы должны определяться исключительно таблицей стилей.

Игнорирование заголовков

Нам даны заголовки разных калибров – от до . Нужно это использовать! Грамотно разбитый на заголовки текст принесет свои дивиденды — и читателям удобно и поисковым системам нравится (то есть будет полезно при seo оптимизации). Неправильно использовать в качестве заголовков полужирное или жирное начертание.

Мерцающий текст

Помимо того что теги и не является официально одобренными W3, они просто уродуют текст. Есть масса других способов как обратить внимание читателя на тот или иной момент.

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

design-mania.ru

Красивый дизайн сайта – начало успешности веб-ресурса

yuzer — Tue, 13 Jul 2010 11:30:16 +0000

Если вы хотите иметь красивый дизайн сайта, то для начала вам следует определиться, что является для вас таковым. Ведь для разных людей понятие красоты различно.

Необходимо выставить критерии, по которым будет идентифицироваться красота. Стоит учитывать не только свои критерии красоты, но также и некоторые другие немаловажные особенности.

Во-первых, надо заметить, что некоторые люди не воспринимают определенные цвета (дальтоники), поэтому стоит подстраиваться и под таких людей.

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

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

mmaxis.ru

Интервью с одесситом, который придумал логотип Украины

yuzer — Sun, 11 Jul 2010 22:56:08 +0000

Одесский дизайнер Андрей Грабельников победил во всеукраинском конкурсе дизайна Design Tomorrow. Темой конкурса стала Украина как брэнд. Он представил свои работы на конкурс в номинациях «Логотип» и «Я люблю Киев». Сделав ставку на нестандартное решение, он выиграл в двух номинациях из четырех, получил 20 тысяч гривен и отправится на фестиваль рекламы в Канны.

В эксклюзивном интервью Андрей рассказал «РепортерUA» о своем видении дизайна, о конкурсе и о своих планах.

Андрей, как часто ты принимал участие в дизайнерских конкурсах? Какие были успехи, опыт и т.п.

Довольно часто с недавних пор. Это хорошая «разминка для мозгов» и отличная возможность проявить себя, в том числе и с другого ракурса - например, я участвовал в конкурсе, главной темой которого была пропаганда экономии электроэнергии (и ресурсов вообще), там скорее плакатная специфика была, вовсе не логотипы.

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

Думаю, я угодил в точку, отказавшись от фольклорных мотивов — раз, предоставив комплексное, современное, открытое для развития решение — два. Больше всего мне были интересны работы харьковских плакатистов, они выступали в другой номинации и закономерно там победили.

Скажи, как пришла к тебе мысль лого? Ты долго работал над визуализацией мысли? Сколько по времени заняла разработка?

Как пришла?.. — путем логических построений. Нужно было придумать универсальную идею, которая бы безо всякой конкретики (потому что любая конкретизация, допустим ,что Украина - шаровары, могла кому-то серьезно не понравиться (допустим — мне)) «говорила» о привлекательности (притягательности) Украины. Отсюда «вырос» магнит (удачно рифмующий заглавную букву в Ukraine) и мысль магнетизма (притягательности), которая является связующим звеном для всех элементов и работает даже в тех случаях, когда сам логотип играет второстепенную роль: затягивающие спирали с местными пейзажами, гипнотические круги в глазах зачарованных очевидцев, посетивших страну — эту тему можно долго и плодотворно развивать. В конечном итоге победил как раз комплексный подход, а не отдельный знак — так и должно быть, ведь темой было «Украина - новый бренд», это комплексное понятие, которое включает в себя, в том числе, и логотип — я именно такое решение и предложил. По времени, на все ушло около недели.

Как ты относишься к тому, что твой логотип напоминает ноты, полосочки, буквы иврита, подкову и т.п.?

Я уже привык, что кому-то не виден объем, который создает контрформа (пустое пространство внутри), и такой человек воспринимает изображение плоским. У жюри, к счастью, таких проблем не возникло.

Где, кем и как будет использоваться логотип?

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

Что лично ты будешь иметь с этой победы, кроме 15 тыс. и поездки на фестиваль Каннские Львы и OFF? Как ты считаешь, это адекватное вознаграждение за труд?

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

С кем ты советовался, или никому ничего не говорил, чтоб не сглазить?

Да нет, сам все сделал, я вообще предпочитаю так и работать.

Ты работаешь вручную (рисуешь сам) или на компе? В какой программе?

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

Твои общие впечатления о конкурсе, награждении, ведь он проводился впервые. Насколько профессиональным он оказался?

По большому счету все получилось хорошо, организаторы очень старались. Самое приятное удивление (как раз профессиональное) — компетентность и смелость жюри (кто бы сомневался).

Ты подавал свои работы в другие номинации конкурса?

Я подал еще одну свою работу на конкурс в номинации I love Kiev, это немного в стороне от основной тематики конкурса, и… тоже выиграл. В общем, у меня два Оскара.

Готов ли ты к возможной критике?

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

Как ты считаешь, поймут ли тебя, твой логотип обычные люди, не дизайнеры, не специалисты?

Я не очень на них рассчитывал, я делал то, что сам считал интересным — в конце концов, всем не угодишь.

В продолжение предыдущего вопроса, как ты считаешь, должны ли простые граждане, обыватели судить, выбирать лучший логотип, знак и т.п.? Я имею в виду ситуацию с логотипом Одессы. Я знаю, ты тоже принимал участие в этом конкурсе, какие твои впечатления о нем? (если можно, фото твоего варианта)

Я считаю, что нет, не должны. Публика не очень компетентна в этих вопросах, кроме того, когда выбирали туристический логотип Одессы — мало того, что голосовали всем миром, так еще и голосовали одесским миром, многие участники делали «логотип для одесситов» — это бред, нужен был «экспорт», он должен в первую очередь нравиться «там», а не «здесь». И вообще попытки ограничиться логотипом обречены на провал, нужны комплексные решения, в котором логотип будет одной из, но не единственной доминантой. Нереально впихнуть дюжину хорошо читаемых, понятных и доступных эпитетов Одессе, уместив все на кончике иглы (в одном символе). Я как раз пытался предложить развернутое решение, но на конкурс выдвинули только листочек с логотипом.

Где, кем и как будет использоваться логотип?

Какой? Одесский будет выбираться снова — мне кажется, это выдает или некомпетентность, или несерьезность организаторов (давайте засветимся еще раз), у нас что, будет по новому логотипу в год? Хотя это мысль — Одесса с тысячей лиц, ага, надо запомнить!

Как ты считаешь, на каком уровне находится сейчас украинский дизайн?

Ниже, как говорится, плинтуса.

Есть ли перспективы развития? Почему так мало интересных работ в рекламе, оформлении…

Ну пока для многих это скорее вопрос моды, престижа, а не эффективности (хотя рекламщики прилагают массу стараний, приводят результаты «до» и «после», чтобы было наоборот), как вот была и продолжается мода на ребрендинг (хотя эта мода у нас порождена как раз ЭФФЕКТИВНЫМ примером Билайна). Зачем тратить миллион, если продажи идут хорошо и со склада без вывески вовсе? Правильно, пока незачем! Правда, потом может быть поздно. С другой стороны (со стороны престижа), если заказывают рекламные решения, то зачастую важен не качественный уровень и мнение профессионалов, а сам факт заказа и статус агентства, у которого заказывают услугу. Самые «жирные» заказы очень показательно совершаются за рубежом, например, в Англии.

Где, у кого ты учился (учишься, хочешь поучиться)?

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

Твои планы на будущее?

Воплотить свой потенциал как можно в большей степени и с как можно большей выгодой.

Лера Чех спецсобкор "РепортерUA" в Одессе, фото автора

Маленький фотошоп Pixlr

yuzer — Wed, 30 Jun 2010 13:07:15 +0000

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

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

Такой маленький фотошоп в виде редактора Pixlr позволит выполнять очень много функций, которые есть в обыкновенном фотошопе. Обрезать, кадрировать, форматировать, менять цвет и тон – все это возможно. Конечно, может немного притормаживать, поэтому тяжеловато рисовать, но в целом это замечательная альтернатива редактору.

Результаты полученные в данном редакторе необходимо сохранять себе на компьютер, так как эта программа не является фотохостингом, поэтому вообще не сохраняет фотографии.

mmaxis.ru

Как вставить фото в фотоэффект

yuzer — Wed, 30 Jun 2010 04:51:46 +0000

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

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

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

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

mmaxis.ru

Онлайн инструменты для проверки кроссбраузерности

yuzer — Wed, 30 Jun 2010 03:23:55 +0000

Кoгдa дeлo дoxoдит дo изучeния прoстoрoв глoбaльнoй сeти, у пoльзoвaтeлeй интeрнeтa eсть вeсьмa широкий выбор браузеров (просмотровщиков). Наша обязанность, как дизайнеров и разработчиков веб-ресурсов — обеспечить совместимость сайта со всеми видами браузеров, иными словами обеспечить кроссбраузерность сайта.

Но сразу возникает вопрос — какие браузеры используют пользователи? Сейчас самыми популярными «просмотровщиками» веб-страниц являются Internet Explorer 7 и 8, Mozilla Firefox, Google Chrome и Opera. Однако для каждого вида сайта, в зависимости от того к какой тематике он относится, процент посетителей с разными браузерами может сильно варьироваться. Поэтому, довольно часто, разработчики определяются, с какой аудиторией им предстоит работать и в зависимость от результатов «подготавливают» ресурс только под определенные виды браузеров.

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

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

Browsershots

Browsershots — это самый популярный сервис для тестирования кроссбраузерности. Он делает скриншоты вашего сайта практически во всех видах браузеров. Благодаря тонкой настройке можно выбрать как виды движков (WebKit или Gecko), так и виды операционных систем (Linux, Windows, Mac OS X или BSD). Так же в настройках есть выбор разрешения экрана, присутствие установленного javascript, flash, java и другие виды параметров.

NetRenderer

Благодаря этому онлайн инструменту можно бесплатно проверить кроссбраузерность сайта во всех версиях Internet Explorer (версии 5.5, 6, 7, 8, а так же 7-6 Mixed и 7-6 Difference). Из функционала стоит выделить отображение времени обработки и ограничение размера экрана в 1024px.

Browser Sandbox

С помощью этого сервиса вы можете запускать станицы в разных браузерах, таких как IE, Firefox, Safari, Chrome и Opera непосредственно из своего браузера. Единственное отличие от других сервисов в обзоре — необходимость установки небольшого дополнения, которое обеспечивает дальнейшее тестирование.

Browsrcamp

Browsrcamp позволяет проверить совместимость вашего сайта с браузерами в Mac OS X. Бесплатная версия позволяет проверить ресурс только в Safari 3.1.2. Но при оплате подписки можно будет тестировать ресурс в 12 различных браузерах, которые могут быть установлены на этой OC. Полный список браузеров, как и стоимость подписки, можно найти на страницах сервиса.

Adobe BrowserLab

Еще один популярный веб-сервис, который позволяет проверять отображение ресурсов в разных браузерах и на разных ОС. Среди функционала есть такие полезные возможности как проверка сайта в разных разрешениях, настройка, редактирование и сохранение различных сочетаний браузеров для тестирования.

Browsera

Платный онлайн сервис предназначенный для тестирования сайта в целом, а не только для проверки кроссбраузерности сайта. Большой набор всевозможных функций и настроек делает Browsera мощным средством для отладки веб-сайта. Из возможностей отметим: анализатор ошибок сценариев на JavaScript; возможность тестирования всего сайта, а не только отдельных страниц; тестирование страниц с динамическим содержанием. У сервиса есть бесплатно-тестовая версия, которая позволяет отлаживать не более 25 страниц в месяц, а так же бесплатный 30-дневный пробный период.

Litmusapp

Еще один платный сервис с большим количеством разнообразных функций, как мелких и довольно специфичных, так и крупных и очень полезных (чего стоит только возможность тестирования сайта на мобильных устройствах с Windows Mobile, Symbian или iPhone). О полном списке возможностей и разнообразных «плюсов» можно прочитать на страницах сервиса.

А какими сервисами и инструментами пользуетесь вы когда тестируете кроссбраузерность сайта?

womtec.ru