-->

SYMBALOO - рисуем картины

Написано: воскресенье, 28 октября 2012 г. автор SHTABOOS BLOG Ярлыки:
0

Всем доброго времени! Обещал рассказать о том, как в Симбалу "рисовать картины". Исполняю :))
Конечно же, "рисовать" буквально мы не будем, а попробуем создать мозаику. И для этого нам придётся решить несколько вопросов. Например, таких: подбирать ли изображение под готовый вебмикс или создать вебмикс по имеющемуся изображению? 
Вопросы эти, наверное, риторические, поскольку наши вкусы, наше видение мира, понятие о гармонии, достаточности, необходимости настолько разнятся, что однозначного ответа на эти вопросы не существует... Будем рассуждать. Всё ж-таки Симбалу - штука, тяготеющая к "прямоугольности". Кроме того,
в центре страницы "несмываемый" виджет, который придётся терпеть. Следовательно, логично будет выбирать такую картинку, центральная часть которой "не влияет на погоду", пустует или содержит малозначительные детали. Далее, - размер исходного изображен и разберём, как всёия. Очевидно, что чем он больше, тем лучше - у нас остаётся достаточно места для "манёвра". Наиболее частое отношение сторон на фото - 3:4 (если вы не задумали исполнить панораму...). Итак, исходные данные получены, в процессе работы мы их проверим и заставим себе помогать.
Теперь поговорим о программном обеспечении. Я использовал вот это: программу для сбора данных с экрана Snagit версии 9.1.1 (сборка 261) от TechSmith, русифицированную (скачать можно ЗДЕСЬ), и Adobe PhotoShop CS 5 Extended версии 12. Можно использовать и CorelDraw, PhotoImpact, - для разбивки изображения на "кусочки". Кроме того, полученные изображения  необходимо будет оптимизировать для Web, а все перечисленные фоторедакторы справляются с этим замечательно. Ну, конечно же, у нас уже должны быть готовы: вебмикс и картинка. неплохо, если Вы заранее создадите библиотечку ссылок, которые пожелаете разместить на кнопках вебмикса. И... запаситесь терпением, поскольку создание вебмикса-картины - дело кропотливое!
Остальной текст статьи, как обычно, под спойлером.
Подготовка 
После столь пространного вступления давайте перейдём к делу. Замечательное свойство вебмикса Симбалу состоит в том, что его размеры можно изменять, тем самым подбирая наиболее выгодную композицию. Обратимся к рисунку и разберём, как всё работает.

Рис. 1

По краям поля и внизу поля - стрелки, при нажатии на которые добавляются - удаляются ряды кнопок. Проверьте "механику" и запомните, к каким изменениям приводит нажатие на ту или иную кнопку. Таким образом, Вы можете составлять различные по величине и форме вебмиксы, на свой вкус и в соответствии со своими задачами. Не забудьте, что вебмикс встраивается в веб-страницу! Настоящее раздолье для творчества. 
Далее я коротко расскажу, как искал рисунок. Желая максимально приблизить соотношение сторон вебмикса к показателю 3:4 и определив, что число кнопок будет чётным, я создал проект вебмикса с соотношением сторон 6:8:

Рис. 2.

6 х 8 кнопок - это фактически размер прямоугольника, для ровного счёта, размерами 600 х 800 px. Соответственно, я предполагал, что на исходное изображение наложу прямоугольник такого размера, а само исходное изображение, естественно, выберу размером побольше. 
Однако, имея в арсенале Snagit, я поступил несколько по-иному. Произвёл захват области экрана "впритирку" к границам кнопок вебмикса, принимая полученный прямоугольный фрагмент (условно) за заготовку 600 х 800.
К тому же это практично: я буду видеть, какую часть картинки займёт виджет, что поможет мне    в композиции.
Поскольку в суши-бар заглянуть всегда не прочь, темой вебмикса избрал японскую кухню, а картинку выбрал вот такую (размер 1144 х 779 px):

Рис. 3.

Вкусняшкой в центре композиции пришлось пожертвовать... Зато получил "обрамление" вебмикса. Теперь осталось всё обработать. О том, как и что получилось, смотрите под следующим спойлером.

Обработка, нарезка 
В PS наложил на исходное изображение фрагмент-вебмикс. Уменьшил прозрачность слоя вебмикса, чтобы всё было наглядно. Как уменьшить прозрачность слоя? Да очень просто:

Рис. 1.

Алгоритм действий приведён на рис. 1, это совсем несложно.

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

Рис. 2.

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

Рис. 3.

Теперь предстоит разделить изображение на фрагменты - 8 по горизонтали и 6 по вертикали и сохранить фрагменты. Конечно же, всё мы будем делать аппаратными средствами PS. На иллюстрациях - некоторые моменты действий.

Рис. 4 - 5.


Таким образом, получилось 48 фрагментов, которые мы оптимизируем для web и сохраним. Делается это так:

Рис. 6 - 8.




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

Рис. 9.


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

Финал 
Если Вы внимательно читали предыдущие статьи, то помните, как "одевать" кнопку в одёжку из собственных изображений. Об этом я рассказывал ЗДЕСЬ.
Предварительно окно поисковика, в котором отображались фрагменты изображения, раздвинул таким образом, чтобы по горизонтали отображалось 8 фрагментов, - так удобнее и нагляднее.
Самая трудоёмкая часть работы! дело в том, что не все фрагменты выглядят квадратиками. Некоторые оказываются как-бы в обрамлении, что приходится исправлять.
Не будем забывать, что при редакции фрагмента появится рамка-фиксатор, которая подсказывает, что именно будет отображаться на кнопке. Рамку придётся в некоторых случаях использовать, чтобы придать фрагментам квадратную форму. 1-2 пикселя если и пропадут, то общей картине не помешают...
Заключительные штрихи: Фудзияма на заставку, и виджет с погодой в Токио - на вебмикс. Домо аригато, Симбалу!
Торопился со статьёй, поэтому ссылки на кнопки не поставил...   Это всегда можно сделать позже. По тематике :)) А сам вебмикс будет в свободно пользовании. Вот его данные:
На сегодня всё, дорогие друзья! Приятного времени в Сети!


0 коммент.:

Понравилось? Поделись ссылкой!

Bookmark and Share