New Comic Book Theme!

kzieres61

@Zenjiro I undid all that I did from Turtle's post, and tried your way in the video.

When i make the theme I see it in my list of "systems" but none of the games show up in it. Also, when I tell it I'm done editing the theme, and restart the retropie the "system" goes away?

kzieres61

@Zenjiro NM I see My mistake now!! when making the theme's, I did not go into the other systems and designate them to go to the TMNT favorites file. TY for the vid!

Zenjiro

Another small bit of news, this is probably more geared towards those who wish to help expand and develop this theme.

I have created a new repo called: Comicbook-Theme_Assets

This repo is still in its infancy, but I will be uploading all my raw editable image files to this repo. Think of this repo as the "source-code" for the theme's comics, system images, and comic_rips before they are rendered and added to es-theme-comicbook.

I keep everything in GIMP's .xcf file format. Why GIMP and not Adobe Photoshop, you ask? Because GIMP is open-source, free, and it gets the job done. I don't want expensive software potentially gating passionate people who would like to contribute.
I will be adding tutorials and guides for those who wish to learn.
I highly encourage others who wish to add their creations to es-theme-comicbook to submit pull requests through Comicbook-Theme_Assets that way it will be easier to render and test before adding into the main repo.
Because I am using some assets provided by @TMNTturtlguy in his ComicBook-Templates repo I will be honoring the same license from this theme.
I will provide submission details in the Readme file, along with other helpful tools.

If anyone else has any ideas or concerns about this I am all ears. I hope this sparks some cool creative advancements for this theme.

Clyde

@Zenjiro Kudos for your efforts, and especially for choosing free software like GIMP that everyone can use regardless of their operating system and personal funds. 👍

Zenjiro

And to be clear, I am NOT anti-Photoshop. If you wish to use Photoshop, Krita, or Paint.NET over GIMP go for it. I just ask that if you plan on submitting something, it be submitted in such a format that at a minimum GIMP is able to open and render the final product.

I know GIMP can open .psd files (or at least some of them) so it should be simple enough to import a .psd file into GIMP then export it as .xcf. I have not tested the other image editing suites.

Other great tools that I use are waifu2x-caffe for upscaling and denoising images. And PNGquant/Pngyu for optimizing .png files for smaller file sizes. (I recommend updating the pngquant that is packaged with pngyu).

In the future I plan on going into greater detail with these tools in the readmes and tutorials.

Krakatoa

Is anyone keeping the 4:3 format updated with images? Its seems to lagging behind

rodclemen

Would anyone be able to help me out, and make the comic text for Cave ?

I cannot for the life of me figure that Adobe Illustrator out :(

Zenjiro

@rodclemen I don't mind making it. What colors? And is it for Cave Story or something else called Cave?

@Krakatoa I myself am not maintaining the 4:3 branch. It simply requires way to much work to the comics twice. Once for 16:9 and once for 4:3. I will however upload a 4:3 template for others to use, so that if anyone else wants to take on the task of maintaining the 4:3 branch they are welcome to do so.

rodclemen

@Zenjiro its a game system called Cave, and as you can see the "official" colours were red and green, so something in that colorrange :)

if you were able to make a video doing the text that would be bloody awesome ;) because I would be able to see how its done (I have some other names I wanted to get done as well, and some collections as well).

Zenjiro

@rodclemen Sure I can do a small video. But it wont be until Sunday or Monday. I'm not in a good location to do the recording. But I do need to make a tutorial video so it's a good excuse to make one. Everything will be done in GIMP as I do not own Adobe Illustrator or Photoshop.

Also If I do the colors of Green as the text's base, with Red Outline and Red Dot-Matrix it might look kind of "Christmas-y" I think going with a black Dot-matrix with a high occupancy might look better. I'll give you a couple to choose from.

rodclemen

@Zenjiro you are most awesome! a GiMP tutorial will be fine, I can convert that to Photoshop at least :)

Zenjiro

@rodclemen Is this any good?

I did make a tutorial vid, but after the recording I discovered that OBS did not capture the drop down menus. So I will have to redo it.

rodclemen

@Zenjiro oh yes! :)

Zenjiro

As promised here is a small tutorial video 13min long: System Image Tutorial Download for best quality.

I did not have any audio as it is very self explanatory, but I will dictate some notes here for some context.

Prerequisite is that you install the Shaka-Pow font before you start up your Image Editor Suite.
Start with a 2400x900 (8" by 3") pixel canvas with 300dpi
Create 5 Blank Layers: Base, Stroke - White, Stroke - Black, Stroke - Color, and Gradient.
(Optional) If you have an image with colors that you wish to use you can add it as another layer. I used the cave.png file that was provided to me, as the base for all the colors in this system image.
On the Base Layer create a Text Layer using the Text Tool with Shaka-Pow font at 150.0 pt, and have the text centered, then adjust the text box so that you can center the word(s) in the dead center of the canvas. It does not need to be perfect, as you can always adjust the canvas size later if needed, but life is easier if you do it now.
Next adjust the text kerning so that they are just barely touching one another.
(!!ATTENTION!!) Now create a "Path" of the text by right clicking on the Text and selecting "Path from Text" Once you have created the Path you must not move the Text layer at all, else it could cascade and you will have to start over again. It is best to no longer touch the Text at this point. If you want duplicate the layer so that if you do make a mistake you can revert it.
Move the Text Layer so that it is on top of the Stroke - Black, but below the Gradient and Stroke - Color Layer.
Next select the Stoke - White layer and change your color to all white.
Select the Paths Tab and right click the path you just created select "Stroke Path..."
Line Width should be 25.0pt, Cap Style Square, Joint Style Miter, and Miter Limit should be 4.0. Select Stroke.
The White Stroke should appear behind the text, and you will repeat the same process, only this time you will select the Stroke - Black Layer, and the only things to change is the Color (to black obviously), and Line Width which should be 16.35pt
Do the same thing again but for the Stroke - Color Layer, using the color of your choice. Line Width should be between 1.50pt and 2.50pt. I normally use 2.50pt. You also want to change the miter to 11.0, this helps with certain letters like 'N', 'M', 'V' which have sharp pointed edges, and with the triangle in the 'A'.
Now import the Dot-matrix, and keep everything if prompted, place it above the Text Layer, but below the gradient and move it around on the canvas till the small dots are just barely on the text still.
Right-click your Text Layer and select "Alpha to Selection" this should highlight everything that is text with a selection line.
(!!ATTENTION!!) Be sure to select the Dot-matrix layer after all the text has been added to the selection, before continuing.
While on the Dot-matrix layer, invert the current selection, then clear/delete. You should be left with only the text having the dot-matrix on it. You can then, and should, deselect everything.
Next duplicate the Stroke - White Layer and place the Duplicate Layer below the original. Rename it if you want for your convenience.
Hide the original Stroke - White Layer, it will not be obvious at first that it is hidden as the duplicate is right underneath it, then with the fill tool, color it whatever color you want. Normally the Stroke - Color layer and this layer are the same, but this is art, make it whatever you want it to be.
Move the layer down a little and to the right. Then turn the original Stroke - White Layer on.
Move the Duplicate Colored layer till it aligns well with one of the edges of your choice and move it down to your liking.
Next go back and select the color you used for the Text, and add the text to your selection again. Then select the Gradient - Layer
With the gradient tool (I normally use Linear Gradients, but choose what you like and experiment if you want) add the gradient on the Gradient - Layer. The Gradient - Layer should be below the Stroke - Color Layer and above the Dot-Matrix Layer.
Lastly, select the Duplicated Stroke - White Layer that you colored earlier and add 4 Drop Shadows. Each one with a blur radius of 30.00. And each one with a different X,Y combination. (20,20) (-20,-20) (-20,20) (20,-20)
At this point you are pretty much done.
For the Retropie you will need to make some finalizing adjustments. ALWAYS scale the final product to have a width of 2000p with a dpi of 72.0dpi any higher and it will not render on the Raspberry Pi. Then export the image as a png file and uncheck all options.
I did not show it in the video, but I would recommend using something like PNGquant/Pngyu and compressing it from a 256bit to 128bit image. Which can cut the overall size of the image down 70-80%
After-Thoughts Some System's or Collection's images might be larger than the 2400 x 900p feel free to adjust the canvas to the length that it needs to be, before creating the stroke path. You will also need to ensure all other layers are also adjusted to the new canvas size. Just be sure that once you are ready to export you make sure the final product is no larger than 2000p with 72.0dpi.

rodclemen

@Zenjiro I will have a look tonight! but thank you SO much for all that hard work!

salor10

@Zenjiro WOW geatest job. Really complete. Congratulations ans my respect.

Zenjiro

I've recently make a small break through that might allow me to show how to get a near accurate recreation of @TMNTturtlguy's Comic Newsprint filter, in GIMP, that is used to give the comics there texture/feel. Right now I am just playing around with it but, it is completely possible to do. More to come.

My current method is okay, but it has its issues. This new one should be a better method

...and now I have more work to do, with redoing all the comics I have already made.

Edit: May have spoke to soon. Hit some snags. But I will keep tinkering with it and post a tutorial on how to do the Newsprint filter once I get it looking right.

Zenjiro

Small update from me. I have merged the 3.2-Beta into the master branch. https://github.com/Zenjir0/es-theme-ComicBook

I will probably not abandon this project for a long while, but development will be sporadic, since I am the only one working on it. Help is always appreciated. It will be slow, but any errors, or issue anyone posts in the github I will make a priority to address.

Thanks to everyone who supports and uses this theme!

Zenjiro

I have added over 30+ tickets to my fork's issue tracker to show all the themes/collections, and ideas I have planned for the future. If anyone wishes to tackle any of them, or add suggestions, and other ideas feel free to. https://github.com/Zenjir0/es-theme-ComicBook/issues

salor10

@Zenjiro I see you put my images in naomi and atomis, thanks a lot.