Браузер Кавер

[@CoDe_reD]

Юзаю MakePreview.ru и доволен. У вас понравились тени от рамки браузера и большее количество настроек, но то что картинка не храниться на сервере — это явный минус, ибо удобнее заказчику сразу ссылочку кидать, на изображение.

[@ludoedoed]

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

[@CoDe_reD]

В целом молодцы!) Если допилите дизайн(горизонтальная прокрутка не тру) и доделаете функционал — получится отличный инструмент:)

[@Pantofobos]

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

[@Treg]

Действительно, на широкоформатном мониторе 20" горизонтальный скрол — это абсурд.

[@0dd_b1t]

может добавите еще, чтобы ты ему линк сайта скормил, а он сам фоткал? Будет удобнее вдвойне.

[@ludoedoed]

Браузеркавер скорее делался для сайтов, которых еще нет. А вам может помочь расширение для хрома „Webpage Screenshot“ и что-то такое же для Файерфокса.

[@rednaxi]

устанавливаете FireShot
делаете скрин станицы полностью, сохраняете его куда нибудь.
заливаете на тот сайт.
Профит: www.browsercover.com/output/YAVeebhpE9CueDd.png

[@0dd_b1t]

гораздо легче — принтскрин и фотошоп с рамкой браузера имхо. А за фаершот спасибо.

[@rednaxi]

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

[@ludoedoed]

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

[@amd_by]

Горизонтальное расположение полей — не совсем удобно…
НУ а в целом очень даже неплохо.
В закладки :)

[@ludoedoed]

Спасибо.

[@TerrorDroid]

>Горизонтальное расположение полей — не совсем удобно…

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

[@rednaxi]

а у меня развернуто но горизонтальный скролл все равно есть :) очень широкая страница у них получилась просто

[@mephisto]

А я разворачиваю, и у меня все равно появляется :-D

[@Niketas]

Фавиконку бы ещё в address bar.

[@ludoedoed]

Спасибо, подумаем.

[@Markovnin]

Неудобно, что на 1280 не влезает, а так все супер.

[@Barzometr]

1400 — тож не влазиет :(

[@tag]

на 1680 тоде не влезает… может у авторов более правильное разрешение на мониторе :/

[@rednaxi]

судя по тексту статьи это их фича что поля надо заполнять по горизонтали:

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

видимо, авторы много программировали на RoR с их идеологией написания программ в строку :)

[@ludoedoed]

У авторов тоже не влазит в экран

[@rednaxi]

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

[@ludoedoed]

Это чтобы помнить, что пора покупать 27"

[@HOBAA]

24" и 1920 вполне достаточно
и для просмотра fullHD приятно

[@ozonar]

Для сайта недостаточно. На 24" сайт не влез

[@grcool]

Так больше блоков AdSense влезает)))

[@klementiev]

Удобно, буду использовать.

[@kastaneda]

большое спасибо :-)
будете очень кстати, скоро сдаю проект )

[@EldkaS]

Полезная штука. Спасибо.

[@Davert]

Спасибо. Недавно пол-интернета обрыл в поисках подобного простого сервиса. MakePreview показался излишне перегружен. Буду следить за развитием. Как идея — предлагаю вам реализовать API, для доступа с других ресурсов.

[@ludoedoed]

Пожалуйста.

[@taldy]

> Это помогает восприятию, точно вам говорю.
Т.е. вы проверили что картинка обернутая в Сафари или Хром помогает восприятию, а в Фаерфокс, Оперу — нет?

PS. Про ИЕ, если честно, я и сам сомневаюсь :)

[@ludoedoed]

Оперы не будет, а Файерфокс скоро появится.

[@pepelsbey]

> Оперы не будет

А в чём причина?

[@grcool]

Она некошерна, видимо)
Действительно, лучше еще 20 вариаций кошерного сафари добавить ;D

[@Terion]

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

[@rednaxi]

хз у меня FF вроде внешне все норм:
www.ii4.ru/images/2010/04/02/41743_temp.jpg
то что наверху замазано — панель закладок, там закладки

так у меня выглядит браузер на работе :) дома почти та же картина.

свистопляска зависит от пользователей а не от браузера, имхо

[@Terion]

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

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

даже голубой хром и тот для этих целей лучше вашего фаерфокса — он хоть и имеет цвет, но он один и больше там ничего нет

[@rednaxi]

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

ну голубой отлив — на вкус и цвет, благо куча тем :)

сафари у меня выглядит вот так: www.ii4.ru/images/2010/04/02/41747_temp.jpg

по-моему одна фигня, только цвета разные — вам видимо больше нравится серый а мне голубые переливы :)

[@Terion]

сафари под виндой выглядит не лучшим образом)

>по-моему одна фигня, только цвета разные — вам видимо больше нравится серый а мне голубые переливы :)
не в этом дело. у нас же речь о том, чтоб подавать сайт в этой рамке. дело не в том, нравится голубой, или нет, а в том, что само по себе наличие цвета в рамке при подаче макета уже отвлекает от самого сайта, вносит в изображение дополнительный тон, меняет впечатление. Серый — нейтрален, поэтому для этих целей подходит идеально

[@ludoedoed]

Вы глубоко правы.

[@Terion]

=)) мерси
только сейчас заметил, какой у вас рекурсивный ник))

[@Terion]

другими словами, смотря на ваш скриншот я вижу браузер, а смотря на скрин в сафари — я вижу сайт

[@rednaxi]

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

[@pxx]

Замазка у Вас не слишком густая.
Спасибо, beboss интересно полистать будет

[@rednaxi]

да какая была в этом паинте в windows 7 :)

[@andre1]

а где ж мозила и ие 8 :)?

[@ludoedoed]

Файерфокс скоро подтянем. Будет еще какой-нибудь раритетный браузер, для эстетов. ИЕ ждать не стоит :-)

[@I_D]

[@rednaxi]

всегда любил смотреть на подобные картинки, только надо было ее cделать чтобы она шла еще глубже и глубже :)

[@ludoedoed]

И еще монитор между двух зеркал поставить.

[@I_D]

[@homm]

Почему кнопка Create cover никак не хочет становиться активной?

[@ludoedoed]

А можно поподробнее?

[@gut]

В Opera 10.51 — кнопка не становится активной

[@homm]

Да, так и есть.

[@ludoedoed]

Спасибо, будем чинить.

[@ilya_compman]

а ещё иногда она ничего не делает
Хром 4
помогает релоад страницы

[@I_D]

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

[@ludoedoed]

Спасибо, будем чинить.

[@Terion]

я точно такой же проект хотел сделать, но так и не успел(
значит буду пользоваться вашим) спасибо)

[@ludoedoed]

Пожалуйста.

[@karasov]

Текст и сам макет в итоге какие-то замыленные, итоговую картинку не мешало бы шарпить.
И тень «лесенкой».
А вообще — очень хорошо, сделали очевидные вещи, которые почему-то до сих пор аналогичным сервисам было делать в лом :)
В закладки, в общем.

[@ludoedoed]

Спасибо, а можно подробнее про замыленность и лесенку?

[@karasov]

Если оставлять «Original image size», то всё нормально, четкий текст, макет 1в1, но стоит выбрать уменьшенный вариант, то и получаем тот самый эффект замыленности при уменьшении.

Ну, к примеру, если взять картинку, которая получилась с «Original image size» и уменьшить её фотошопе, скажем до 700, результат будет гораздо лучше, нежели тот, что получится на выходе браузеркавера с выбранным «700×∞». Посмотрите как тот же фликр шарпит картинки при уменьшении, думаю вам стоит такой же метод внедрить, иначе этот дополнительный функционал — бессмыслен. Ну, во всяком случае для меня :)

На счет тени… не то чтобы «лесенка», но у неё (тени) есть четкая граница, чего нет у оригинальной маковской тени. Вот, при большом увеличении (картинка кликабельноувеличивается):



Слева — результат работы браузеркавера, справа — скиншот окна стандартными средствами макоси…

[@ludoedoed]

Спасибо за комментарии, скрипт уменьшения будет, конечно, допиливаться. Мы все же не Адоуби пока, чтобы сходу писать идеальную обработку изображений (на их стороне 20 лет работы :-). Для чистоты стоит еще заметить: я не считаю, что изображения замыливаются критически и невыносимо, однако перфекционизм, конечно, никто не отменял.

[@karasov]

Ну я человек очень дотошный, так что это не в упрёк всё, а как пища для размышлений. Что бы допилил лично я. А у Адоуби, так, тоже к слову, обработка изображений тоже далеко не идеальна :)

[@Bittabola]

Шрифт заголовка и адрес бара не соответствует оригиналу

[@ludoedoed]

Спасибо, а в каком браузере?

[@Bittabola]

Сафари

[@marchenkovdmitry]

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

[@ludoedoed]

Пожалуйста.

[@blia]

Ну шрифты уж сильно лажевые. А так нормально, только зачем? Сложно так в баузере щелкнуть? А че все ноют, что не влазит по горизонтали? на моих 20" норм, или уже уменьшили?

[@ludoedoed]

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

[@blia]

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

[@blia]

Я даже не удержался и сделал для Вас видео.
www.youtube.com/watch?v=jotYgl9c4mc

[@bems]

где огнелис?

[@ludoedoed]

Когда я открыл ФФ, чтобы сделать скриншот, он начал качать и ставить обновления. Жду вот. Скоро будет :-)

[@zencd]

Разработчики, счастливые обладатели 26" мониторов, красавцы!

[@blia]

да на 20" отлично показывается.

[@makaron]

17" и 20" :)

[@qik]

Жаль что он сам по сайтам не ходит.

[@Terion]

а смысл?
так подают макеты еще не готовых сайтов. т.е. когда только нарисована картинка.
а если есть верстка — то проще её залить на сервант да ссылку отправить

[@MeDBejoHok]

смысл в том, что в закладках один сайт, для двух задач, а не две закладки. Которых кстати уже и так ту мач.

[@Chesheer]

Оффтопом: (для макинтошников)
Такие скрины предпочитаю делать в родном Safari — он очень даже хорошо понимает тот же PSD формат. Скрин с тенюшкой от браузера делаю через обычное сочетание кнопок CMD+Shift+4 (уже вбито в быстрый вызов на планшете) и потом пробел (для выбора и сохранения скриншота определенного окна). Итог после клика на окне — файл на рабочем столе с нужным контентом. Очень спасает при отсутствии или очень медленном интернете.

[@ludoedoed]

И мы так делаем, только вот если страница высокая, то всю ее сфотать никак не выйдет.

[@Chesheer]

Опять таки зависит от высоты страницы + размер и разрешение экрана.
В итоге более предпочтительно высылать народу простую страницу без всяких браузерных рамок. =)

[@ludoedoed]

Те страницы, что рисую я, обычно не влазят ни в какие мониторы во вертикали. У нас даже формат официальный 1000×∞ :-) А с браузерной рамкой все же приятнее.

[@Chesheer]

Да, если порталы ваять — никакой браузер не спасет.
Приходится или через №-ное место скрин делать, или через такие вот сайты.
Хорошо, хоть с коллегами повезло — им лишних красявостей не надо =)

[@leg]

Почему забыли про людей с ноутбуками и экранами по меньше?

[@Terion]

идеально, ящетаю.
а справа адсенса влезет сколько угодно)))

[@ludoedoed]

Отличное предложение, спасибо.
Только длинная страница — это такая изо-шутка. Мы над ней еще подумаем.

[@ernt]

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

[@ludoedoed]

А мне кажется, в Нетскейпах есть шарм :-)

[@blia]

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

[@cuzmich]

Я считаю это круто. Такая утилита нужна, но еще не существует в удобном виде.

некоторые идеи:
-возможность оставлять места favicon'ов пустыми
-возможность вписать в фон #123456 (по умолчанию в прозрачный)
-подкорректировать шрифты ближе к оригиналу
-расположить элементы интерфейса порядочно
-рассмотреть возможность отбрасывать отражение (сомнительная функция)
-относительная масштабируемость финальной картинки процентах (100%, 50%, 25%, 66%, 33%) поможет избежать смазаности изображения

Хорошая утилита, мне понравилось.

[@ludoedoed]

Спасибо за идеи.

[@FXM]

В browsercover.com/output листинг директории разрешен. Может стоит убрать?

[@Demir0]

Зато интересно так смотреть результаты :)

[@Marklee]

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

[@Marklee]

Чорт, пропалили.

[@butuzov]

ух ты а чем текст накладываете? не похоже на пхпшную накладку которю они ттфами ставят.

[@MeDBejoHok]

Полезный сервис, большое спасибо. Но:
1) То что у вас сейчас есть на главной, можно втиснуть в 320х240, а судя по комментариям, вам и 1600х1200 мало. Неужели сложно сразу сделать нормально? Это 5 минут работы
2) Открытие в новой вкладке? Да вы серьезно чтоли? Перестаньте, выгружайте на этой же странице.
3) А что будет если у меня макет 1200 по длине?

[@ludoedoed]

1) Про дизайн уже все пошутили, спасибо
2) Зато можно оборачивать один файл несколько раз, с разными настройками
3) Обернется, как пить дать

[@exel]

Спасибо.
Как уже говорилось выше, для кого-то минус — хранение на сервере, для меня — не принципиально. За то есть возможность писать title, это правда не хватало на makepreview.com :)

[@ludoedoed]

Спасибо

[@Rubiroid]

отличный результат на выходе! буду пользоваться
на makepreview.com ужасные рамки, тени и цвета кнопочек не те (да и сами кнопочки деформированы)
у вас же всё один в один (шрифт ну почти один в один)
спасибо за сервис

[@ludoedoed]

Спасибо.

[@Tilli]

Моё мнение:
— горизонтальная прокрутка не ау;
— тень от Хрома в Виндовс ужасна;
— хотелось бы побольше бразузеров;
— нужна возможность загрузки фавиконки;

Возможно, не помешала бы возможность выбора формата изображения.
Кроме того, приглядитесь к адресной строке в Хроме:


Однако, ваш сервис намного приятней MakePreview.ru, удачи!

[@ludoedoed]

Тень от Хроме в Виндоус 7 так и выглядит, вопросы к Балмеру.
Побольше браузеров будет.
О фавиконке мы размышляем.
Про адресную строку тоже знаем, будет реализовано.

Спасибо :-)

[@mihmig]

а если браузер отобразит страницу не так как на скриншоте?

[@ludoedoed]

Нужно будет устраивать серьезный разговор с технологами :-)

[@Zhikharev]

Сделайте еще рамки в виде мобильных телефонов. Думаю много кому пригодится.

[@depb]

Чудесно) Возможно, не помешала бы множественная загрузка. Иногда бывает так что есть эскиз не только главной страницы :)

[@Adaptogen]

спасибо) сервис хороший ) нет артефактов и нет оптимизации картинки) это радует)

[@Rubiroid]

C момента релиза пользуюсь вашим сервисом регулярно. Очень нравится. Вот появились кое-какие мысли по улучшению.
1. Конечно, первое что хотелось, это задавать цвет фона, при этом оставить фичу с прозрачным фоном.
2. Мультизагрузочность. Результат выводить уменьшенными картинками (уменьшать их просто в хтмл, чтоб не генерить превью).
3. Фича для любителей мейкпревью. Возможность сразу заливать картинки на бесплатные фотохостинги. Не уверен, насколько это возможно, но было бы приятным бонусом.
4. Загрузка фавикона.

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

[@makaron]

Мы очень рады, спасибо.
Над 2м и 4м пунктом работаем, 3й под вопросом, 1й — скорее всего нет. Мы не стоим на месте и постоянно улучшаем сервис.

Насчёт фидбека, можно мне в личку.

[@clockworkbird]

Не работает сегодня, а очень жаль.

[@makaron]

Извините, временные проблемы с сервером. Постараемся сегодня исправить.