Способ конвертации картинок для Спектрума в Фотошопе.

[Juge (GodFather)]

Итак расскажу о способе конвертации картинок на Спектрум во всеми любимом Фотошопе. При помощи этого метода можно конвертировать как в обычный режим – 8х8 пикселей, 2 цвета в знакоместе. Так и в мультиколоры всех видов. К сожалению, у метода много технических ограничений. Так, например, в данном случае мы не можем использовать брайт, т.к. Фотошоп будет выбирать цвета из одной палитры, не деля где с брайтом инк и папер а где без. Метод описывается для человека, с минимальными познаниями в шопе. Чтобы даже программист смог сконвертить картинку. Так что продвинутые пользователи шопа могут пропустить некоторые пункты.

Для работы нам понадобится Фотошоп версии 11. Можно и любой другой – может отличаться фнкционал. Так же нужна палитра обычных Спековских цветов. Лежит в приложении.
Мучить для примера сегодня мы будем моего любимого персонажа из Мортал Комбата – Скорпиона.

1. Для начала создаем экран 256х192 – т.е. с обычным размером Спектрума. Так же можно любого другого размера, в зависимости от целей.
Шоткаты: ctr+N
У нас получился простой белый экран, размером 256х192 и 32-х битным цветом.


2. Дальше выбираем картинку, какую вы хотите облагородить, и грузим. Картинка может быть любого размера – но в данном случае рассматривается картинка бОльшего размера.
У меня раскрывается на весь экран картинка, снятая кнопкой PrtSc из инета. Для экономии времени и просто из-за лени. Можно конечно ее сохранить на диск, и загрузить. Те же яйца.


3. Ясно, что картинка такого размера нам не в звезду ни в красную армию. Поэтому делаем следующий хинт: нажимаем ctr+A и затем ctr+C
Что мы сделали? Мы выделили весь экран, а потом скопировали его в память. Тоже самое можно сделать через меню: Select>All; Edit>Copy

4. Скорее всего нам этот экран больше не понадобится. Поэтому закроем его – ctr+F4 На вопросы о сохранении – все в сад, ничего не надо. Если прямо нужен экран – ну оставьте его. Переключение между загруженными картинками – ctr+Tab

5.
6. Теперь у нас на экране снова пустой экран 256х192.


7. Нажимаем ctr+V

Что мы сделали ? Выплюнули обратно на экран содержимое памяти. Теперь наш экран выглядит примерно так:


Тоже самое можно сделать через меню: Edit>Paste

8. У нас огромный кусок никуда не влезающего экрана. И совершенно не того, чего мы вообще-то собирались тут малевать. Ща исправим – давим клавишу V, либо выбираем на панели инструментов слева вот это:


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

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


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


Экран слишком здоровый и не помещается. Рамки не видно. Жмем ctr+- для уменьшения экрана (зум). И ctr++ для увеличения экрана.
Чтобы двигать экран, зажимаем пробел и таскаем мышью.
Увеличивать и таскать экран можно так же через панель инструметов:


10. Теперь зажимаем одновременно клавиши Shift+Alt хватаем мышью крайний квадратик и тащим внутрь – вся конструкция равномерно уменьшается.


Уменьшаем до тех пор, пока картинка нам не понравится.


Во время ресайза можно двигать картинку – просто тяните за пространство в рамке. Главное центральный кубик не трогайте и боковые тоже. И если масштаб без контрола с шифтом сделали случайно – то давите ескейп, и повторите попытку заново. Если изображение нас устроило, то давим Enter. Либо галочку справа сверху – все, мы вышли из режима масштабирования. Т.к. картинка больше видимой области, то мы так же можем ее двигать туда-сюда, подкорректируя изображение по вкусу.

11. Теперь нам нужно сконвертировать эту картинку в 8 спектрумовских цветов. Для этого лезем в Image>Mode>Indexed Color
На вопрос о склейке картинки давим ДА (Flattern Image).
В пункте Palette выбираем Custom
В вывалившемся окне выбираем Load и грузим палитру 8_real_color_zx.

[Advertiser]

[Juge (GodFather)]

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


Diffusion,


Pattern.


По опыту юзается больше всего Диффузия – но как говорится в руках мастера…

Есть еще один параметр, напрямую влияющий на качество изобрадения. Это % заливок, используемый при конверсии – чем больше, тем больше точек в переходах цвета.


13. Итак, мы получили изображение в 8 цветов, 256х192 пихеля.


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

Дальше начинаются чудеса… А точнее 2 недели мозготраха, и чтения мануалов. К сожалению создатели Фотошопа либо понятия не имели о спектруме, либо тщательно это скрывали. И как следствие мы будем делать знакоместа теми средствами, которые для этого не предназначены. Итак приступим.

14. Первым делом нажимаем кнопку ctr+' – должна выключится сетка. Эта сетка хайдится\анхайдится по этой кнопке. Либо через меню –Wiev>Show>Grid

15. На экране появится сетка, по умолчанию. Нам надо сделать ее 8х8 пихелей.
Лезем Edit>Preferenses>Guides, Grid and Slices


16. Ставим в панеле Grid, Gridline every=8 и смотрим, чтобы были пиксели. Дальше нам нужно поставить коэффицент деления грида внутри – если хотим, чтобы сетка была 8х8, то делаем 8 и subdivisions=1. Сейчас все должно выглядеть вот так:


Жмем ок. Экран должен приобрести вид картинки с клетками 8х8.


17. Теперь нам нужно нарисовать Slice – это линии, по которым шоп будет делить знакоместа. Вообще это сделано для вебдизайнеров, но мы подло используем их в своих целях.
В панели инструментов выбираем Slice Tool.


Проверяем, чтобы были включены привязки : Wiev>Snap


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


Внимание! Выделяйте _именно_ 10х10 клеток! Больше 100 клеток шоп делить не будет! И будут получатся знакоместо 10-12-13 пихелей и прочее. Тоже самое и для мультиколора. Т.е. от размера клеток не зависит – зависит от их количества.
Теперь у вас должны появиться иконки конвертиков, означающих, что картинка порезана.

[Juge (GodFather)]

19. Теперь в области созданного квадрата нажимаем правую кнопку, и выбираем Divide Slice


Это мы делаем, чтобы не рисовать руками каждое знакоместо.
В этом меню ставим галочку Divide horizontally into и выбираем пиксели. В писелях ставим 8. Каждые 8 пихелей резать к хренам собачьим. Тоже самое для вертикали. Должно выглядеть примерно так:


Следите, чтобы новые полоски совпадали с Гридом! Если они не совпадают, значит выбрали больше чем 10х10 клеток. Если нужен мльтиколор – то соответственно выбираем 8 пикселей по горизонтали и 2 по вертикали. Но в случае с мультиколором 8х2 у нас делимый квадрат будет не 10х10 клеток (100) а в 4 раза меньше! Т.е. 5х5 клеток (25). Придется сделать больше итераций с квадратами, но это быстро. Учтите эту формулу и для других типов мультиколора - всего 100 клеток, независимо от размера в пихелях.

20. Отлично. Но нам то нужно гораздо больше знакомест, а не 10х10. Все просто – рисуем остальные квадраты, чтобы заполнить весь экран (не обязательно 10х10, но не больше). И делим их. Должно получиться вот так:


21. Ура! Все в синих квадратах – это наши знакоместа. Теперь, если сохранить файл в формате .PSD/.PSB то можно будет использовать эту матрицу для других картинок – просто перенесите в этот файл в фотошопе нужную картинку. Больше делить экран не придется.

22. Теперь заставим Шоп выдать нам 2 цвета на знакоместо. Для этого идем в File>Save for Web & Devices


23. Видим такую картинку:


24. Синий экран – это наша картинка, покрытая квадратами с номерами. В окне с картинкой можно так же приближать и двигать картинку. Но в данном случае нам это не сильно поможет. Так же есть параметры цветов и т.д. – можно конечно их поменять, но сейчас выбран только один квадрат. Для остальных действуют свои настройки. Нам нужно выделить целиком все квадраты. Для этого мышью протянем квадрат выше левого верхнего угла до ниже правого нижнего угла.
У нас появятся муравьи по периметру. Это значит, что все знакоместа выбраны. И установки будут действовать сразу для всех. Что нам и нужно.


25. Теперь выбираем тип файла Gif;
метод выбора цветов – Selective (при любом другом он будет цвета брать не из имеющихся, а по своему разумению);
лучше поставить no dither, на всяк пож, чтобы не поковеркать чего ненароком;
и поставить нужное количество цветов в квадрате – в данном случае 2.


26. Теперь, если мы просто сохраним, то получим больше 100 маленьких гифов, размером 8х8 пикселей, по 2 цвета в каждом. Нам конечно такое не шармэль. Поэтому обманываем шоп, и давим Preview.
[

27. У нас открывается превью нашей картинки в броузере. Отлично! В хтмл все эти картиночки собраны в 1. Но нам оно в вебе не надо, поэтому смело давим Prt Sc. Этим мы засасываем в память весь экран.


28. Закрываем страничку, и возвращаемся в шоп. Нам больше сэйв не нужен, нажимаем кенцел.

29. Теперь давим ctr+N либо File>new, ставим разрешение 256х192, и давим ок.

30. Нажимаем ctr+V либо Edit>Paste

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


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

32. Теперь последний шаг – сохраняем картинку в .gif Лезим в File>Save for Web & Devices
Выбираем все те же настройки, что и для сохранения со слайсами. Только ставим не 2 цвета, а 8. Выбор цветов должен быть все тем же Selective.

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

фсе... ыыы... полдня писал - руки отваливаются. Не думал, что то что делается на автомате требует такого количества описания... Посмотрите плс на предмет ошибок и неточностей. Или может что-то непонятно.

[newart]

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

Ага, у Медноногова получше получалось, да и у Реалмастеров, не говоря уже о bmp2scr. Всетаки удел фотошопа это предпроцессинг (подготовка к конверсии).

[psb]

если сохранить файл в формате .PSD/.PSB

ё-моё.....

[Juge (GodFather)]

Да, я там накосячил с мультиколором. Завтра уже исправлю.

---------- Post added at 22:49 ---------- Previous post was at 22:47 ----------

newart, Да. Здесь все тупо - шоп конвертит без оглядки на левые пиксели и общую картину. Не для того он. Но мало ли. Может кому и сгодится.

---------- Post added at 22:50 ---------- Previous post was at 22:49 ----------

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

[pROF^4D]

Bmp2scr и Retro-X (его же последняя версия) конвертор спецально заточеный под работу с 8битной графикой и спектрумовской в том числе. Результат получишь тот же, а может даже и лучше, но времени потратишь в разы меньше.

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


P.S. Для предпроцессинга можно и обычным PC вьювером пользоваться, Irfan View к примеру.

[pulsar]

фсе... ыыы... полдня писал - руки отваливаются. Не думал, что то что делается на автомате требует такого количества описания... Посмотрите плс на предмет ошибок и неточностей. Или может что-то непонятно.

верю, что времени на описание потрачено уйма, мне из всего описания интересны шаги где-то 19, 22, 25, да и то не все, может быть еще что-то вокруг (все знаю, но может быть не так часто это нужно), и на самом деле всем кто будет пользоваться будет интересно только это (плюс может быть шаг 21 и еще что-то по мелочи), все кто не знал остального все равно в такие дебри не полезет 99.9%

Всетаки удел фотошопа это предпроцессинг (подготовка к конверсии).

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

но времени потратишь в разы меньше.

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

не можем использовать брайт

хотя если изврат будет крепчать это можно и исправить.

штука ненужная

думаю еще может пригодиться, правда ставить ради такого фотошоп?! надо будет gimp как нить на предмет аналогий поковырять (тут вот только сильно сомневаюсь, что ему такое извращение по зубам), как говорится:

для общего развития самое оно

за мануал ... спасибо!

еще раз большое спасибо!! думаю можно будет метод куданить применить, хоть:

Bmp2scr и Retro-X

спасут в 75-99% случаев.

и еще:

По опыту юзается больше всего Диффузия – но как говорится в руках мастера…

на самом деле для рисования, в руках мастера, больше толку будет от none.

[Sayman]

кстате bmp2scr имеет результаты куда лучше, чем retro-x. но вторая под профи и атм умеет дёргать картинки.вот сижу изучаю внутрености.

[Rindex]

Juge (GodFather), а чего он по не русски у тебя? Я себе русский сделал, и не жалуюсь...

Скрытый текст

[свернуть]