Шаг 14 - Напутствие "хирургу"

Получил я тут письмо по поводу предыдущего шага:

  Прочитал "Первые Шаги", последний раздел. 
  А как разрезать изображение на неравномерные куски?
Ну что я мог ответить ??? Конечно "Присылайте посмотрим".

Вот что я получил:

Например, есть рисунок:

step14_1.gif (12129 b) я могу его с помощью программы разрезать так:

step14_2.gif (14157 b) а надо так:

step14_3.gif (15126 b) как это можно сделать например, в Adobe Photoshop или Corel Photopaint, чтобы не потерять пикселы?

Ну дак что ? Будем резать... Где там наш скальпель ? Как раз о нем и поговорим...

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

PhotoShop'ом не пользовался из-за того, что там слои, а объединять их почему то никогда не приходило в голову, и потом при разрезании он будет сглаживать края, и картинка будет портиться.

Для того, чтобы разрезать картинку я обычно сохраняю ее в формате BMP, а потом лезу в любимый PaintBrush :-).

Давайте так и сделаем. Залезайте в Paint. Естественно теперь вопрос, как резать ? В нашем примере автор достаточно грамотно показал линии разреза. Горизонтальные линии все идут от начала и до конца, как я и советовал. Теперь не будет проблем с размещением картинки в таблицу.

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

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

Давайте приступим. Для начала отхватим верхнюю треть изображения, где голова Микки и кнопки "Фото", "Музыка", "Друзья". Если Вы уже залезли в Paint для начала увеличьте изображение (Ctrl-PgDn), чтобы не промахнуться трясущейся рукой. Если вам не видно все изображение полностью, то распахните окно на весь экран или увеличьте разрешение монитора. Ну если у вас этого не получилось, то режте по кусочкам.

В палитре инстументов выберите прямоугольник из штриховых линий. Теперь выделяйте ту треть изображения от самого правого до самого левого края. Жмите Ctrl-Ins, а затем Del. У вас удалится часть изображения , т.е. этот кусок закрасится цветом фона. По умолчанию он белый, но если вам он не подходит, т.е. если у вас уже белое изображение, то выберите в палитре цветов самый яркий цвет, я например люблю розовый.

Вот что теперь получилось с изображением.

step14_11.gif (6826 b)

А где тот то кусок ??? А он в буфере обмена :-). Теперь запускайте второй PaintBrush и нажмите Shift-Ins. Кстати советую для начала сделать размер редактируемой области размером поменьше (Ctrl-E), например 1х1.

Вот, что получается в результате :

step14_12.gif (5711 b)

Теперь колдуем до конца с этой частью. Давайте теперь отрежем кнопку "Фото". Делаем опять по старому : делаем цвет фона розовым, выделяем эту кнопку от верха до низа не оставляя ни одного пропущенного пиксела. Жмем Ctrl-Ins и Del. Теперь лезем в третий PaintBrush и вствляем туда изображение.

step14_13.gif (5128 b)

step14_14.gif (1151 b)

Теперь у нас получилась одна кнопка. Ее можно сохранить в отдельный файл, который потом уже зажмете в GIFAnimator'e (кстати прога просто супер).

Дальше идем снова во второй PaintBrush. Теперь наша задача вырезать голову Микки. Для простоты выполнения этого действия мы и использовали розовый цвет. Если бы там ничего не было Вы бы врядли вспомнили каким был последний пиксел, когда вы отхватывали кнопку "Фото", а так есть четкая граница, вдоль которой выделить не составит особых проблем.

Ну дальше не буду рассказывать как резать. Дорезайте кнопки "Музыка" и "Друзья" сами. А потом отрезаете среднюю часть у первой картинки. А пошло поехало по старому плану...

Ну теперь то понятно как разрезать картинку без проблем ??? Надеюсь пикселы не вылезают :-) !!!

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

В этом случае используйте вложенную таблицу. Я в предыдущем шаге не использовал этот метод, так как все и так влезало, но не надо забывать о этой ОЧЕНЬ хорошей возможности.

Теперь у нас будет вложенная таблица из трех ячеек, в которых разместятся кнопка "Фото", голова Микки, и две кнопки "Музыка" и "Друзья". Все предельно просто как видите !!!

Как Вы думаете программа бы с этим справилась ??? Я лично думаю, что нет. Хотя есть одна, которая режет картинки. Не помню как звать, но она из семейства Adobe. Режет не плохо, но вот Html же оставляет желать лучшего. Я считаю, что самому резать намного лучше, чем доверать это какой-то автоматике.

Ну что, есть еще вопросы ???


Предыдущий Шаг | Следующий Шаг | Оглавление
Автор Кузин Андрей.