Урок является прямым последствием темы о промо-коробке для LiveStreet. Т.к. мне лень отправлять в Google всех, кто хочет сделать простые изменения дизайна коробки или кому не подходят предоставленные размеры, после изучения смогут самостоятельно менять фон, размеры отступов, размер всей картинки, обрезать лишнее.

Не смотря на то, что урок составлен для Paint.NET последовательность действий и используемые инструменты в других редакторах растровой графики будут мало чем отличаться. Я выбрал Paint исключительно из-за его бесплатности и малого веса дистрибутива (1,6 Мб, требует установленный .NET Framework).

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

Последнее традиционное напоминание перед началом урока: Все скриншоты кликабельны.

Шаг 1. Открываем Paint.NET и создаем новый документ (Файл > Создать… или Ctrl+N) размером 600x600 пикселей:


Шаг 2. Открываем выбранную мной текстуру для нового фона (Файл > Открыть… или Ctrl+О), в верхнем правом углу видим обе наших открытых картинки, делаем операцию копипаст: кликаем по текстуре, жмем Ctrl+С, переходим на созданное нами в Шаге 1 изображение и жмем Ctrl+V. Результат:

На панели «История» (Справа под миниатюрами открытых файлов) показаны все наши операции с этим файлом. Можем закрыть файл текстуры, больше он не нужен.

Шаг 3. Т.к. размер текстуры меньше картинки которую мы хотим получить используем уличную магию растянем ее до нужного размера: тянем за нижний правый угол текстуры (за кружочек) к нижнему правому углу картинки, можно чуть дальше.

Без потери качества такие операции не обходятся, но в данном случае это не существенно.

Шаг 4. Создаем новый слой поверх существующего (Слои > Добавить новый слой или Ctrl+Shift+N). Делаем заливку этого слоя: выбираем инструмент заливка (пиктограмма канистры или F), выбираем темный цвет заливки (я выбрал темно-синий) на панели «Палитра».

На панели «История» вы можете увидеть, что Заливка использовалась мной 2 раза, я просто подбирал цвет.

Шаг 5. Добавляем прозрачности верхнему слою, что бы проявилась текстура. (Слои > Свойства слоя… или F4 или нижняя правая пиктограмма на панели «Слои»)


Шаг 6. Делаем свечение за пару шагов. Создаем еще один новый слой поверх существующих (Слои > Добавить новый слой или Ctrl+Shift+N). Рисуем на нем эллипс: выбираем инструмент Эллипс на панели «Инструменты» (Инст) или О, Заливку ставим «25 процентов» (на верхней панели), выбираем светлый цвет на панели «Палитра» и ни за что не догадаетесь рисуем эллипс.


Шаг 7. Что бы из такого решета получить подобие свечения делаем с начала размытие, потом корректируем прозрачность.
Шаг 7.1. Размытие: Эффекты > Размытие > Гауссовское… с параметрами как на скриншоте.

Шаг 7.2. Прозрачность: Слои > Свойства слоя… или F4 или нижняя правая пиктограмма на панели «Слои»


Шаг 8. Добавляем коробочку. Создаем новый слой поверх существующего (Слои > Добавить новый слой или Ctrl+Shift+N). Открываем файл коробочки без теней и без отражения (так же есть в архиве в конце урока)и повторяем операцию копипаст описанную в Шаге 2, но уже с коробочкой вместо текстуры. Перетаскиваем кробку в центр: инструмент «Переместить выделенное» (верхняя правая пиктограмма на панели Инструменты или клавиша М).


Если просто сохранить полученное в формате png, то получится примерно такой результат:


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

Шаг 9. Уменьшаем картинку. Изображение > Изменить размер… или Ctrl+R. Я уменьшил до 400 пикселей просто для примера.


Полученный результат:


Шаг 10. Теперь можем еще и кадрировать. Выделяем область которую хотим сохранить с помощью Прямоугольника (верхняя левая пиктограмма на панели Инструменты или клавиша S), затем обрезаем: Изображение > Обрезать по выделению или Ctrl+Shift+X.


Результат кадрирования:


Если нужен еще меньший вес файла, сохраняем в jpeg и наслаждаемся жизнью :)


Спасибо за внимание.

Обещанные ссылки для скачивания:
Народ
Зеркала

Использованные ресурсы:
Paint.NET
Текстура земли

P.S. Полученный результат не претендует ни на какую эстетическую ценность и создан только для примера. Надеюсь все это окажется хоть кому-то полезным.
P.P.S. Чуть не забыл: это мой первый урок и специально для него я впервые запустил Paint.NET, т.ч. вполне возможно все можно сделать гораздо проще быстрее и качественнее.