New Comic Book Theme!

[lilbud]

@meleu said in New Comic Book Theme!:

There some guys working to add support for Neo Geo

PUZZLE BOBBLE HERE I COME

[Alturis]

@alturis said in New Comic Book Theme!:

If anyone else is better at making these logos than I end up being, I am interested in getting some done for the following two custom category names:

2 PLAYER
CLASSICS

Here is my attempt. Thanks for the instructions @TMNTturtlguy !
I was confused about what order the 4 layers were supposed to be in within illustrator so had to play around with it for a while. But my end result looks like these.

!

[ByteThis]

@tmntturtlguy Very kind of you for the templates, considering others have bowed out. Kudos man !

[Alturis]

Ok take 2 on the "2 PLAYER" and "CLASSICS" logos. I think I have the technique down better now.

Edit: Updated based on a few more things I noticed about color schemes in the original set

[Clyde]

@alturis said in New Comic Book Theme!:

Ok take 2 on the "2 PLAYER" and "CLASSICS" logos. I think I have the technique down better now.

Very nice, though I like the colours of the former ones better, but it's always good to have several to choose from. And if you hone your skills by doing more of them, all the better. :)

[cyperghost]

@tmntturtlguy Still alive and fine ;) Thank you
We older we get the more we don't loose track

[Alturis]

@clyde said in New Comic Book Theme!:

though I like the colours of the former ones better

Well I was trying to hit on the Red vs Blue standard for 2 player. And the classics matches better with the marquee image I used which also has yellow text.

[pjft]

@alturis these are really good. Just one comment: I think the ones in the actual theme are in italics, maybe @TMNTturtlguy can confirm that.

[Alturis]

I also found a "simpler" technique that only requires the use of PhotoShop. (which I have a license for) and not having to use Adobe Illustrator (which I only have another 5 days of use in the free trial)

And honestly, I think it comes out looking more like the originals than my attempts at @TMNTturtlguy's Illustrator technique.

1. Install Shaka_Pow.TTF as found in etc/emulationstation/themes/ComicBook/art.
   (Right click and select install in windows)

2. Open photoshop and Create a new image 8 inches by 3 inches, 72 pixels per inch (the default)

3. Use eraser tool to make the background layer transparent

4. Use Text tool set to Shaka Pow Upright, 150pt, Strong, in a color of your choosing. Open the Character settings (looks like a folder button) and set the VA to -22 to squeeze the letters closer together) Center the text in the image with the move tool. Right click the layer and select Rasterize Type (or Rasterize Layer depending on your Photoshop version)

5. Ctrl-Click on the text layer's thumbnail to select all of the pixels in that layer and create a new blank layer. Edit -> Stroke... Width: 7.8, color: black, Location: Outside

6. Create another new blank layer. Edit -> Stroke... Width: 11.5, color: white, Location: Outside

7. Ctrl-Click that white layer, Ctrl-C, Ctrl-V to copy paste (or you can just duplicate it and then Ctrl-Click the new duplicate of the white layer).

8. Use Eyedropper to pick the same color you used for the original text and paint over that white selection with that color. Then select the entireity of that layer and Free Transform move it down a bit until that last layer sticks some color out from under the white.

9. Copy the desired color from @TMNTGuy 's dot matrix psd (you also need to first resize this to 25% to match the resolution. Paste that as a new layer on top of all the others

10. Use magic select and set focus to the original text layer selecting the colored letters. Invert this selection, Select->Modify->Expand 2 pixels (with "at canvas bounds" disabled). Set focus to the dot matrix layer and erase everything in the selection.

11. Set the opacity of the dot matrix layer to something like 50% to better blend its color with the background primary letter color.

12. Select the lowest layer (should the be colored layer that was shifted down) and Click the "Fx" button to create a double drop shadow. (or double click the layer in newer versions of Photoshop) One at like 130 degrees, 10 px, 10%, 10px, 50% opacity. The other a copy of that but flipped 180 degrees.

13. Save As... PNG. Done!

I typed those steps while creating this in the exact same way as an example:

You can get the Dot Matrix PSD in @TMNTturtleguys git hub.
https://github.com/TMNTturtleguy/ComicBook-Templates.git

Edit: Added step 11 and updated the example image

[dizmodawg]

I know this is a old post but how do i disable metadata? i just want videos enabled and no metadata as it is for my arcade cabinet.

[TMNTturtlguy]

@alturis those are awesome! I couldn't have done them any better! nice work

[TMNTturtlguy]

@pjft @Alturis the text is not in italics, however i do adjust a lot of the character attributes. per the directions, you need to change the character setting as follows:

text:
-Size 150
-Click on character
-Height 92
-Width 91
-Va-22

[TMNTturtlguy]

@alturis This also works, in photoshop can you change the height and width of your text? The other thing you will want to play with is the opacity on your dot matrix.

[dizmodawg]

@dizmodawg said in New Comic Book Theme!:

I know this is a old post but how do i disable metadata? i just want videos enabled and no metadata as it is for my arcade cabinet.

Can any one help me remove the metadata(game info)?

[Alturis]

@tmntturtlguy said in New Comic Book Theme!:

you will want to play with is the opacity on your dot matrix.

Ah good call! Yeah I will try that. The PS method also does not let you easily do the separation between letters in the color of the letter either I noticed afterward.

Like between the i and o in Violet the PS technique leaves the dot matrix fully connected. But in the Illustrator method, you can control that better so that a line of color separates the letters. Maybe a minor detail but noticeable.

[Alturis]

@dizmodawg said in New Comic Book Theme!:

@dizmodawg said in New Comic Book Theme!:

I know this is a old post but how do i disable metadata? i just want videos enabled and no metadata as it is for my arcade cabinet.

Can any one help me remove the metadata(game info)?

I saw your post and was going to respond. But I am not really sure what you are asking. You are saying you want the ComicBook theme but to have the metadata fields blank? Or to be reworked so that the video fills the whole right side of the screen and all the metadata fields are just not there?

For that I think you would have to manually edit the /etc/emulationstation/themes/ComicBook/art/menu.png to make the right hand side look like what you want.

Then edit the /etc/emulationstation/themes/ComicBook/art/comic_book.xml and just remove or comment out all the metadata fields and adjust the size of the video entry.

[dizmodawg]

@alturis said in New Comic Book Theme!:

comment

What do you mean by comment ?

[Alturis]

@dizmodawg said in New Comic Book Theme!:

What do you mean by comment ?

Wrap it with <!-- -->

So like that entire section of Meta Data:

<!-- Meta Data //-->	
<!-- <!-- ADD THIS *************************************** //-->
	<view name="detailed, video">

		<text name="md_lbl_genre, md_genre, md_lbl_rating, md_lbl_developer, md_developer, md_lbl_publisher, md_publisher, md_lbl_lastplayed, md_lbl_playcount, md_playcount, md_lbl_players, md_players">
			<color>000000</color>
			<forceUppercase>0</forceUppercase>
			<fontPath>./art/Shaka_Pow.ttf</fontPath>
			<fontSize>0.02</fontSize>
		</text>

		<text name="md_lbl_rating, md_rating, md_lbl_publisher, md_publisher, md_lbl_lastplayed, md_lbl_playcount, md_playcount, md_lbl_releasedate, md_lbl_genre, md_lbl_developer">
			<pos>1 1</pos>
		</text>

		<datetime name="md_lastplayed, md_releasedate">
			<color>000000</color>
			<forceUppercase>0</forceUppercase>
			<fontPath>./art/Shaka_Pow.ttf</fontPath>
			<fontSize>0.02</fontSize>
		</datetime>

		<datetime name="md_lastplayed">
			<pos>1 1</pos>
		</datetime>

		<text name="md_lbl_releasedate">
			<pos>0.513 0.635</pos>
			<size>0 0.033</size>
			<color>000000</color>
			<fontPath>./art/Shaka_Pow.ttf</fontPath>
			<fontSize>0.02</fontSize>
		</text>
		
		<datetime name="md_releasedate">
			<pos>0.59 0.635</pos>
			<size>0 0.033</size>
		</datetime>

		<text name="md_lbl_genre">
			<pos>0.513 0.66</pos>
			<size>0 0.033</size>
		</text>
		
		<text name="md_genre">
			<pos>0.59 0.668</pos>
			<size>0.16 0.02</size>
		</text>

		<text name="md_lbl_developer">
			<pos>0.513 0.685</pos>
			<size>0 0</size>
		</text>
		
		<text name="md_developer">
			<pos>0.59 0.694</pos>
			<size>0.18 0.02</size>
		</text>

		<text name="md_lbl_players, md_players">
			<pos>0.89 0.635</pos>
			<size>0.09 0</size>
		</text>

		<text name="md_players">
			<pos>0.96 0.635</pos>
			<size>0.02 0</size>
		</text>
		
		<rating name="md_rating">
         <pos>0.87 0.66</pos>
         <size>0 0.038</size>
         <filledPath>./art/star_filled.png</filledPath>
         <unfilledPath>./art/star_empty.png</unfilledPath>
        </rating>
		
		<text name="md_lbl_playcount">
			<pos>0.88 0.685</pos>
			<size>0.0 0.033</size>
		</text>
		
		<text name="md_playcount">
			<pos>0.96 0.685</pos>
			<size>0.02 0</size>
		</text>

		<text name="md_description">
			<color>000000</color>
			<forceUppercase>0</forceUppercase>
			<fontPath>./art/Shaka_Pow.ttf</fontPath>
			<fontSize>0.023</fontSize>
			<size>0.45 0.19</size>
			<pos>0.525 0.746</pos>
		</text>
		
		<image name="md_hidden">
			<pos>0.7 0.942</pos>
			<path>./art/hidden.svg</path>
			<maxSize>0.032 0.032</maxSize>
			<origin>0.5 0.5</origin>
			<color>7d7d7d</color>
		</image>
		
		<image name="md_kidgame">
			<pos>0.75 0.942</pos>
			<path>./art/kid.svg</path>
			<maxSize>0.032 0.032</maxSize>
			<origin>0.5 0.5</origin>
			<color>7d7d7d</color>
		</image>
		
		<image name="md_favorite">
			<pos>0.8 0.942</pos>
			<path>./art/favorite.svg</path>
			<maxSize>0.032 0.032</maxSize>
			<origin>0.5 0.5</origin>
			<color>7d7d7d</color>
		</image>

	</view>
-->  <!-- AND THIS **************************** //-->
<!-- End Meta Data //-->

[dizmodawg]

@alturis said in New Comic Book Theme!:

@dizmodawg said in New Comic Book Theme!:

What do you mean by comment ?

Wrap it with <!-- -->

So like that entire section of Meta Data:

<!-- Meta Data //-->	
<!-- <!-- ADD THIS *************************************** //-->
	<view name="detailed, video">

		<text name="md_lbl_genre, md_genre, md_lbl_rating, md_lbl_developer, md_developer, md_lbl_publisher, md_publisher, md_lbl_lastplayed, md_lbl_playcount, md_playcount, md_lbl_players, md_players">
			<color>000000</color>
			<forceUppercase>0</forceUppercase>
			<fontPath>./art/Shaka_Pow.ttf</fontPath>
			<fontSize>0.02</fontSize>
		</text>

		<text name="md_lbl_rating, md_rating, md_lbl_publisher, md_publisher, md_lbl_lastplayed, md_lbl_playcount, md_playcount, md_lbl_releasedate, md_lbl_genre, md_lbl_developer">
			<pos>1 1</pos>
		</text>

		<datetime name="md_lastplayed, md_releasedate">
			<color>000000</color>
			<forceUppercase>0</forceUppercase>
			<fontPath>./art/Shaka_Pow.ttf</fontPath>
			<fontSize>0.02</fontSize>
		</datetime>

		<datetime name="md_lastplayed">
			<pos>1 1</pos>
		</datetime>

		<text name="md_lbl_releasedate">
			<pos>0.513 0.635</pos>
			<size>0 0.033</size>
			<color>000000</color>
			<fontPath>./art/Shaka_Pow.ttf</fontPath>
			<fontSize>0.02</fontSize>
		</text>
		
		<datetime name="md_releasedate">
			<pos>0.59 0.635</pos>
			<size>0 0.033</size>
		</datetime>

		<text name="md_lbl_genre">
			<pos>0.513 0.66</pos>
			<size>0 0.033</size>
		</text>
		
		<text name="md_genre">
			<pos>0.59 0.668</pos>
			<size>0.16 0.02</size>
		</text>

		<text name="md_lbl_developer">
			<pos>0.513 0.685</pos>
			<size>0 0</size>
		</text>
		
		<text name="md_developer">
			<pos>0.59 0.694</pos>
			<size>0.18 0.02</size>
		</text>

		<text name="md_lbl_players, md_players">
			<pos>0.89 0.635</pos>
			<size>0.09 0</size>
		</text>

		<text name="md_players">
			<pos>0.96 0.635</pos>
			<size>0.02 0</size>
		</text>
		
		<rating name="md_rating">
         <pos>0.87 0.66</pos>
         <size>0 0.038</size>
         <filledPath>./art/star_filled.png</filledPath>
         <unfilledPath>./art/star_empty.png</unfilledPath>
        </rating>
		
		<text name="md_lbl_playcount">
			<pos>0.88 0.685</pos>
			<size>0.0 0.033</size>
		</text>
		
		<text name="md_playcount">
			<pos>0.96 0.685</pos>
			<size>0.02 0</size>
		</text>

		<text name="md_description">
			<color>000000</color>
			<forceUppercase>0</forceUppercase>
			<fontPath>./art/Shaka_Pow.ttf</fontPath>
			<fontSize>0.023</fontSize>
			<size>0.45 0.19</size>
			<pos>0.525 0.746</pos>
		</text>
		
		<image name="md_hidden">
			<pos>0.7 0.942</pos>
			<path>./art/hidden.svg</path>
			<maxSize>0.032 0.032</maxSize>
			<origin>0.5 0.5</origin>
			<color>7d7d7d</color>
		</image>
		
		<image name="md_kidgame">
			<pos>0.75 0.942</pos>
			<path>./art/kid.svg</path>
			<maxSize>0.032 0.032</maxSize>
			<origin>0.5 0.5</origin>
			<color>7d7d7d</color>
		</image>
		
		<image name="md_favorite">
			<pos>0.8 0.942</pos>
			<path>./art/favorite.svg</path>
			<maxSize>0.032 0.032</maxSize>
			<origin>0.5 0.5</origin>
			<color>7d7d7d</color>
		</image>

	</view>
-->  <!-- AND THIS **************************** //-->
<!-- End Meta Data //-->

Sorry i am a noob when it comes to a xml file and editing still don't understand could you edit a xml file and send it to me so there is no metedata?

[Alturis]

Well if you are going to make this how you want you are going to have to open up the comic_book.xml file in a text editor and maybe lookup some basics of what XML is and its format. (https://www.xmlfiles.com/xml/xml-syntax/) Happy to help but I would take some iteration to get the video sized and positioned.

What I am saying is look for the <!-- Meta Data //--> in the xml and add this just after that on a new line: <!--

Then look for <!-- End Meta Data //--> at the end of the file and add this just before it on a blank line: -->

That will "comment out" all of the text between those two points and it will be ignored. You will also want to do the same thing before and after any instance of this as well to not have the image show up.

	<image name="md_image">
		<pos>0.918 0.525</pos>
		<maxSize>0.127 0.17</maxSize>
		<origin>0.5 0.5</origin>
	</image>

Here is a blank right hand side menu.png though:

What are you asking is very custom so you are going to have to customize it yourself. ;)