New Comic Book Theme!

[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. ;)

[dizmodawg]

Video size is fine i just want to remove game metadata ratings but the image size is fine. So i changed the back ground a little bit and this is what it looks like so i want no metedata video size and location is fine.

[Jedi1josh]

I just downloaded this theme last night, it's funny that I see it here today.

[Alturis]

@tmntturtlguy said in New Comic Book Theme!:

in photoshop can you change the height and width of your text?

No, you can't that I have seen. But it doesn't really seem to matter much. The result is close enough that it works fine at normal 150pt for matching the look at a glance.

[dizmodawg]

<!-- Meta Data //-->
<!--
<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.53 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.61 0.635</pos>
		<size>0 0.033</size>
	</datetime>

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

	<text name="md_lbl_developer">
		<pos>0.53 0.685</pos>
		<size>0 0</size>
	</text>
	
	<text name="md_developer">
		<pos>0.61 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.825 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.83 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.53 0.746</pos>
	</text>
	
	<image name="md_hidden">
		<pos>0.86 0.943</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.9 0.943</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.96 0.943</pos>
		<path>./art/favorite.svg</path>
		<maxSize>0.032 0.032</maxSize>
		<origin>0.5 0.5</origin>
		<color>7d7d7d</color>
	</image>

</view>

-->
<!-- End Meta Data //-->
And it did not ignore the metadata it moved in the games list

[Red5ive]

Hi guys, love the theme.
Trying to get it to work with video clips on my windows box. I have the latest windows release that jdrassa is putting out here:
https://github.com/jrassa/EmulationStation/releases/tag/continuous

I have made a new folder in .emulationstation and edited my gamelist entry for a test game with the path to the video:
<video>~/.emulationstation/downloaded_videos/amiga/batman.mp4</video>

In emulation station I switched to the video layout B
but the video does not show, I just get the artwork image repeated in the black window.
Am I using the wrong tags or video format or is something else wrong?
Thanks in advance!
S

[mitu]

@red5ive said in New Comic Book Theme!:

Am I using the wrong tags or video format or is something else wrong?

Check the es_log.txt file to see if the video file is found, otherwise check if the file can be played by VLC.

[Red5ive]

@mitu Taking a look at the es_log.txt I realised that I had lots of 'failure to find file' errors because one of the scrapers I had used had re-named some of the roms, so I had two entries in my gameslist for the same game and I had added the video path to the one that does not exist.
Anyway working now!

This may have been asked before but is there a way to have the main image not duplicate itself or use an alternative for when a video is not found for a game, such as use the joypad/joystick graphic for that system as used in the detailed view?

[dizmodawg]

So i have a question, so i am building a arcade only image for my bartop and i don't want any metadata to show, How would i edit the comicbook theme to have no metadata to show? All i want is the videos to show.