Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 110
Конечно слабо, на такое только китайцы способны. :)
У меня только сомнения есть, реально ли нарисовали так.
То что нарисовать можно - сомнений не возникает.
Код поискал странички - не наткнулся.. надо в китайский/японский знать, чтобы найти.
Так подумал, можно легко написать программу, которая загружаемую картинку перерисовывать на таблицах,
но руками делать тоже самое - просто нужно быть сумашедшим
То что нарисовать можно - сомнений не возникает.
Код поискал странички - не наткнулся.. надо в китайский/японский знать, чтобы найти.
Так подумал, можно легко написать программу, которая загружаемую картинку перерисовывать на таблицах,
но руками делать тоже самое - просто нужно быть сумашедшим
Так, речь идет о китайцах, а они очень трудолюбивые. :) Похоже на првду.
Интерфейс блокнота и експлорера на японском, так что китайцы тут не при чём...
А то что это не руками сделано - имхо наиболее правдоподобный вариант, т.к. если делать это вручную, то как минимум итераций и ошибок будет больше в разы...
А то что это не руками сделано - имхо наиболее правдоподобный вариант, т.к. если делать это вручную, то как минимум итераций и ошибок будет больше в разы...
Руками-руками, просто видео потом ускорили
это сделано руками.
Более того, из этой же серии видел, как в паинте была нарисована Мона Лиза. Причем хорошо нарисована. Но в паинте)
Более того, из этой же серии видел, как в паинте была нарисована Мона Лиза. Причем хорошо нарисована. Но в паинте)
Пеинтов и я видел, причём их на youtube довольно много, но одно дело нарисовать в пеинте и совсем другое - создать подобного качества html на ходу.
На тему пеинта очень рекомендую посмотреть на то, как создаются картины в OpenCanvas http://en.wikipedia.org/wiki/OpenCanvas после этого создание качественных работ в пеинте не будет казаться чем-то особенным.
Предположу, что в данном случае у них там на фоне менеджер буфера обмена, типа Clipmate, в котором по шагам разобран весь код и автору остаётся только перемещать курсор в нужные места и жать Ctrl+V, остальные действия и ускорение времени сделаны для создания эффекта того, что всё это сделано руками. За пол часика тренировок и с использованием программ, которые тут в комментах не раз предлагались думаю подобный шедевр станет доступен не только нашим восточным братьям.
На тему пеинта очень рекомендую посмотреть на то, как создаются картины в OpenCanvas http://en.wikipedia.org/wiki/OpenCanvas после этого создание качественных работ в пеинте не будет казаться чем-то особенным.
Предположу, что в данном случае у них там на фоне менеджер буфера обмена, типа Clipmate, в котором по шагам разобран весь код и автору остаётся только перемещать курсор в нужные места и жать Ctrl+V, остальные действия и ускорение времени сделаны для создания эффекта того, что всё это сделано руками. За пол часика тренировок и с использованием программ, которые тут в комментах не раз предлагались думаю подобный шедевр станет доступен не только нашим восточным братьям.
Помоему там японские иероглифы. Но я шокирован.
Даешь «Рисунок beta», безтабличный, на дивах :)
Ну это совсем просто. Пиксель - див с абсолютными размерами и координатами. Кстати, это идея...
Вся картинка с девушкой (то есть самая главная таблица) — 132
Вся картинка с девушкой (то есть самая главная таблица) — 132 х 246. Перемножаем. Получаем 32472 пикселей2. Отнимаем примерно треть, ведь у нас фон там черный, допустим, что он у нас будет одним дивом. Итого, 32472 – 10824 = 21648 дивов с абсолютными координатами :о)
а сильно ли там меньше таблиц?
Пиксель2 - это прям так здорово! =)
Все круче. Можно реально векторные картинки из прямоугольников рисовать без привязки к крупнопиксельному растру. ;]
Да, слышали мы про рисование пикселями на *ML-е:
Можно патентовать. Вебдваноль нервно курит ручку швабры.
<pixel>
<colormap>
<red>0xFB </red> <green>0x04</green> <blue>0xA4;</blue>
</colormap>
<position>
<x-axis> 288 </x-axis> <y-axis> 151 </y-axis>
</position>
</pixel>
Можно патентовать. Вебдваноль нервно курит ручку швабры.
А страничка то наверняка не оптимизирована... :)
А я подобной дурью маялся в свое время. Началось с рисования в экселе от нечего делать, потом увидел, что получается неплохо, прописал макрос, который создал хтмл-код, потом еще яваскриптом анимацию добавил. Жалко, что стерлось.
Где-то в закромах лежит рнр скрипт, который генерирует подобную таблицу из скармливаемого ему рисунка. Правда, там была проблема с тем, что indexcolor, кажется, использует только 256 цветов. Но получалось весьма забавно. И время экономится по сравнению с ручным рисование колосально.
на коленке примерно так:
?
не запостилось ))
<table>
<?php
$im = ImageCreateFromJPEG("logo.jpg");
$imx = imagesx($im);
$imy = imagesy($im);
for($x=0;$x<=$imy;$x++)
{
?>
<tr width="1">
<?
for($y=0;$y<=$imx;$y++)
{
$rgb = ImageColorAt($im, $y, $x);
$r = ($rgb >> 16) & 0xFF;
$g = ($rgb >> 8) & 0xFF;
$b = $rgb & 0xFF;
echo "<td bgcolor=\"".dechex($r).dechex($g).dechex($b)."\" width=1></td>";
}
?>
</tr>
<?
}
?>
</table>
<table>
<?php
$im = ImageCreateFromJPEG("logo.jpg");
$imx = imagesx($im);
$imy = imagesy($im);
for($x=0;$x<=$imy;$x++)
{
?>
<tr width="1">
<?
for($y=0;$y<=$imx;$y++)
{
$rgb = ImageColorAt($im, $y, $x);
$r = ($rgb >> 16) & 0xFF;
$g = ($rgb >> 8) & 0xFF;
$b = $rgb & 0xFF;
echo "<td bgcolor=\"".dechex($r).dechex($g).dechex($b)."\" width=1></td>";
}
?>
</tr>
<?
}
?>
</table>
к table добавь cellpadding="0" cellspacing="0"
не нмого код подредактировал, вот что вышло:
http://gogolev.net/habr.html (осторожно, почти полметра!)
http://gogolev.net/habr.html (осторожно, почти полметра!)
сила :)
А в данном конкретном случае можно все много оптимизировать:
1. colspan, rowspan.
2. Для каждого из цветов прописать отдельный стиль и в коде получится td id="a", td id="b", ...
1. colspan, rowspan.
2. Для каждого из цветов прописать отдельный стиль и в коде получится td id="a", td id="b", ...
простите конечно, но скрипт мой) поэтому отвечу)
1.колспаны и роуспаны значительно увеличат работу скрипта, хотя идея таковая конечно была)
2.учитывая что первой картинкой рабочей была фотография - подход дичайший) но конечно правильный, с точки зрения "эстетики программирования". для лого хабра конечно было бы всего два айдишника))
1.колспаны и роуспаны значительно увеличат работу скрипта, хотя идея таковая конечно была)
2.учитывая что первой картинкой рабочей была фотография - подход дичайший) но конечно правильный, с точки зрения "эстетики программирования". для лого хабра конечно было бы всего два айдишника))
2. id на то и id, чтобы сделать уникальный индификатор :)
тут уж class
тут уж class
А если воспользоваться CSS код получаться куда меньше. Воде
и
и
напоминает методы Яндекс.Директ по выводу иконки телефона в объявлениях...
Японцы.
мне проще написать php скрипт, который вместо картинки выдаст такую вот лабуду, чем задрачиваться в нотепаде )
но всё равно товарищ мололец
но всё равно товарищ мололец
И чеь вам этот РуТьюб нравится - как то на коленке явно сделан. YouTube гораздо удобней и оптимизированней
Согласен. Какой-то он странный, вечно на какие-то глюки нарываюсь.
сегодня рутуб жжот - загрузился быстро, не пришлось ждать минут пять, как обычно, чтобы посмотреть минутный ролик.
Шокирует. А ведь можно такое на postscript писать. Так, между делом, в блокноте штрихкод какой-нибудь написать. Потом вооружиться арифмометром «Феликс», счётами и растрировать потихоньку =)
Жаль, что видео очень ускоренное.
Но интересно на такое взглянуть ;)
Но интересно на такое взглянуть ;)
Убейтесь фотошоперы:)
Круто. Хотелось бы еще на страничку вживую посмотреть.
прям как корейцы в старкрафте :)
Недаром они СУДОКУ пидумали:)
Здорово, мне понравилось :)
Завораживает!!!
Просто завораживает!
Да, мне так слабо...
Просто завораживает!
Да, мне так слабо...
саундтрек неплохой.
под него можно и не такое написать
под него можно и не такое написать
Японцы, мне кажется, скоро будут jpg-файлы прямо в блокноте писать.
сильно!
впечатлило!
впечатлило!
Сколько такой верстальщик стоит?
нисколько.
верстальщики, которые чего-то стоят, не забывают писать доктайпы и обязательные элементы.
верстальщики, которые чего-то стоят, не забывают писать доктайпы и обязательные элементы.
Конечно, для того, чтоб нарисовать таблицами девку и показать миру, что это просто возможно, надо писать доктайпы, да, все в XHTML и дивами. Да-да.
ИМХО, в данном конкретном случае задача стояла не написать правильный документ, а нарисовать картинку средствами HTML.
Только то, как данный человек ориентируется в этой всей верстке чего-то да стоит. Я не видел ни одного промаха :) А это не таблица 10х10, это картинка!
Только то, как данный человек ориентируется в этой всей верстке чего-то да стоит. Я не видел ни одного промаха :) А это не таблица 10х10, это картинка!
вот был бы код страницы, был бы и разговор более предметный.
нарисовать картинку нетрадиционным способом человеку вроде бы удалось.
но результат мы не видим фактически.
нарисовать картинку нетрадиционным способом человеку вроде бы удалось.
но результат мы не видим фактически.
верстальщики, которые убивают время на ручную генерацию html-ной картинки, если это можно сделать автоматически, действительно ничего не стоят. Как и кодеры, пишущие руками ascii-арт. Фактически это-же xpm.
Однако ascii-арт имеет право на существование, как и, наверное, рисование в css и html.
Однако ascii-арт имеет право на существование, как и, наверное, рисование в css и html.
Эх...черт. Я так надеялся что там хентай будет =)
хентай : )
http://bestpics.ru/full/1.colorxhtml
http://bestpics.ru/full/1.colorxhtml
я где-то видал javascript ray-trace render.
в ГИМПе есть целых 2 плагина для представления картинки в html.
Есть подозрение, что для создания ролика как раз использовался один из них (который 0.html). Достаточно просто открыть файл в блокноте и постепенно его стирать. Затем проиграть в обратной последовательности. Ну и самое начало сделать руками.
Есть подозрение, что для создания ролика как раз использовался один из них (который 0.html). Достаточно просто открыть файл в блокноте и постепенно его стирать. Затем проиграть в обратной последовательности. Ну и самое начало сделать руками.
Слабо, говорите : ) вот, например (http://bestpics.ru/full/0.html). Примерно 10 мин работы, из которых 8 ожидание открытия файла.
Самое ужасное, что в самом конце ролика он дальше начал что-то фигачить в блокноте :) Хотя возможно просто ридми :) Но эт жесть конечно.
Впечатлил саундтрек. %)
Абалдеть!
вот кому то реально нечего было делать...
вот кому то реально нечего было делать...
Так вот для чего ты, табличная верстка! *))
Да, круто. Сам когда-то пробовал, но немного в другом духе:
http://www.parser.ru/forum/?id=54218
сверстано с учетом ограничений синтаксиса/ограничений форума
http://www.parser.ru/forum/?id=54218
сверстано с учетом ограничений синтаксиса/ограничений форума
Тоже рисовал когдато так Мона Лизу, а вообще есть программы типо bmp2html (http://leo.yuriev.ru/bmp2html) которые это делают это автоматом.
хабранарод, познакомьтесь с PNM форматом, и так же счастливо рисуйте в блокноте!
(сам когда увидел в linux, в осадок выпал)
(сам когда увидел в linux, в осадок выпал)
забыл, что pnm расширен и заменен XPM ом
Как говорят у нас в ЖЖ - "в мемориз!"
Действительно шокирован. такое даже в голову не приходило!
Действительно шокирован. такое даже в голову не приходило!
А вот, к примеру, Хабра-лого без единого пиксела графики. Такой же мутотой сделано.
Что-то у тебя лого растянуто немного...
Хотя код лучше чем у меня, посмотри выше:
http://www.habrahabr.ru/blog/creative/14…
Хотя код лучше чем у меня, посмотри выше:
http://www.habrahabr.ru/blog/creative/14…
Одно время сам такой же фигней баловался. Вообще довольно забавно :-)
Дорогие японцы, IE конечно плохой браузер, но прогресс дошел до того, что и он уже давно поддерживает картинки, а скоро случится чудо и он начнет поддерживать прозрачность PNG! Так что пользуйтесь фотошопом и не парьтесь)
имхо видео интересно только с точки зрения достижения индивидума в рисовании с помощью таблиц, но вот практического смысла нет никакого.
ужас нереальные психи
Любой нормальный html-верстальщик-маньяк не признающий wysiwyg может также.
а чо doctype не указан? :)
Мне понравилось.
Только реальнее это в обратную сторону сделать:)
Перевести цвета в код, а потом сделать вид, что руками кодишь..
Только реальнее это в обратную сторону сделать:)
Перевести цвета в код, а потом сделать вид, что руками кодишь..
не похоже что на ролике делали вручную и потом ускорили. Когда этот длинющий код вставляется в блокнот, то блокнот всегда не активен, а эксплорер — активен… и не моргает… больше же времени он находился в блокноте, а в эксплорере только «обновить» нажимали
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Уроки рисования в notepad