Print Page | Close Window

Menu Screen

Printed From: Pixel Joint
Category: Pixel Art
Forum Name: WIP (Work In Progress)
Forum Discription: Get crits and comments on your pixel WIPs and other art too!
URL: https://pixeljoint.com/forum/forum_posts.asp?TID=19028
Printed Date: 11 September 2025 at 8:11pm


Topic: Menu Screen
Posted By: A2J2TIWARI
Subject: Menu Screen
Date Posted: 04 June 2014 at 3:15am
Alright guys so I need little help with the background for Menu Screen for a game I am working on.

Here is the idea:


And here's what I have got so far:


Struggling with clouds at the moment as I am not sure how to make them.

The mountain and castle are at the left because the menu will come as an overlay and in the middle so to keep the focus on it is in the left. Anyways, right now I am struggling with clouds as I am not sure how to make them. Also the style has to be kept cartoony to match the style of other sprites and work I have done - sorry can't show other work as I do not have the permission to show them yet..

The mountains are blue as I haven't changed the palette yet but I'll make them brown so that castle stands out.



Replies:
Posted By: jalonso
Date Posted: 04 June 2014 at 5:10am
You are just wasting time starting on the BG first because you don't yet know what will be covered.
Work out the logo and GUI (even roughly but not too rough) and then see what space you have and what the BG layout needs to be and where.
A good time saver, if possible, is to use a BG from the game and then edit that BG to fit the title screen. Say if some part of the game has a mountain BG then copy a part of it for the title screen and work on that by adding your castle, birds (3), trees and tiny things like that so it seems like a whole new piece.


-------------
http://www.pixeljoint.com/forum/forum_posts.asp?TID=9378&FID=6&PR=3 - PJs FAQ <•> http://www.pixeljoint.com/forum/forum_topics.asp?FID=6 - Sticky Reads


Posted By: A2J2TIWARI
Date Posted: 05 June 2014 at 1:44am
Originally posted by jalonso


You are just wasting time starting on the BG first because you don't yet know what will be covered.Work out the logo and GUI (even roughly but not too rough) and then see what space you have and what the BG layout needs to be and where.A good time saver, if possible, is to use a BG from the game and then edit that BG to fit the title screen. Say if some part of the game has a mountain BG then copy a part of it for the title screen and work on that by adding your castle, birds (3), trees and tiny things like that so it seems like a whole new piece.


Makes a lot of sense. And thus instead of wasting much time I started working on menu. However the developer has recently informed that this background will be used for various situations: Saving Screen, Title screen etc. So I will have to complete this. Although middle portions will be hidden in most screens so I am not going to focus a lot in the middle. But still need to make clouds.



Posted By: jalonso
Date Posted: 05 June 2014 at 5:43am
That's a more efficient way to handle this and save time. Don't over pixel the BG just focus on the GUI and save the BG as a separate file you keep coming back to. When you get to the save screen then work on the GUI and just work a little more on the BG so it works for that. If you need the BG for something else then work on the GUI or whatever and then touch up the BG file some more.
You can even add a little more space on the sides at the end so that one single BG file works for everything maybe with a little move to the left or right so it seems like a different piece. Say the castle is not seen on the credits but is seen on the title screen and so that one image you only pixelled a little bit extra on one side which saves a whole bunch of time. In any project try to have any asset usable in different ways if at all possible.


-------------
http://www.pixeljoint.com/forum/forum_posts.asp?TID=9378&FID=6&PR=3 - PJs FAQ <•> http://www.pixeljoint.com/forum/forum_topics.asp?FID=6 - Sticky Reads


Posted By: A2J2TIWARI
Date Posted: 05 June 2014 at 11:38pm
Got it sir! Focusing on the foreground/Scroll now.

How can I make it look better and interesting? About the logo and other text, Developer has said to take take of it himself.




Posted By: JackBread
Date Posted: 06 June 2014 at 12:01am
You can add subtle creases and imperfections on it. It looks really fresh aside from the tears.


Posted By: Delicious
Date Posted: 07 June 2014 at 7:35pm
the less-saturated colors on the sketch were far better in my opinion. The blue and green on the current image hurts to look at.


Posted By: A2J2TIWARI
Date Posted: 09 June 2014 at 1:11am
They are not the actual colours to be honest... I just picked up a colour and used various tones of it without changing hues or saturation... I am trying to get forms correct first.


Posted By: Melee
Date Posted: 09 June 2014 at 2:23am
I do that sometimes, except I use cyan and magenta. :)

The scale of the quill feels off to me—like they're usually pretty big right? (Reference image http://witchesofwalthamabbey.co.uk/user/quill%20and%20parchment.jpg - linked because I don't want to stretch the forums.) Then again, is it there as a cursor/selection notifier? If it is, stick some temporary dummy options in there and see if it still looks wonky. If it does, you could further drop down the size so that it's definitely an icon that we're seeing.

As for making the scroll look worn, more texture would help. Like you have some rips defined, but they don't actually work their way into the parchment/gui. Obviously, you can't get too crazy b/c the game's text will need to be readable, but you can totally add more texture from where you are now.

Also, If you look into what parchment actually was/is, you'll find that it wasn't paper. It was/is made out of animal skin (vellum is parchment, but usually finer and made out of calves, I think. It's also usually translucent, whereas not all parchment is.) It has its own specific textures b/c it's essentially a leather product. It was used mostly in Europe after Egypt stopped trading papyrus with the Europeans. There are plant–based parchments, but they weren't used like this that I know of. It was used during medieval times, primarily, but then, once you hit the middle ages, everything shifts from animal-based parchments to cotton rag–based paper b/c of cost/demand/technologies. Cotton–made paper doesn't have a specific grain like wood–pulp paper, but it has like... a wrinkled/ripply feeling to it because of all the fibers. So either route you go, you'd have two texture possibilities to go off of. (I've had so much paper and printing history drilled into me; I'm sorry! xP)


Posted By: A2J2TIWARI
Date Posted: 12 June 2014 at 1:37am
Okay, now there is a possibility that the Scroll will not be added so I have to work on background as much as I can to make it look good. Win win for me as I get to learn lots of new stuff. And I have already come to understand few things.


I am struggling with textures on the nearest mountains. Also I think I should change palette a little bit.



I tried to add little wear and tear. However the crumble effect that Fizzick talked about, I am not sure how that can be done.


Posted By: Latch
Date Posted: 12 June 2014 at 10:14am
I love the new scroll, very nice!

The crumpled effect? That will be a lot to do with lighting.

http://pixels.com/featured/plate-54--observation--crumpled-paper-johannes-von-gumppenberg.html - See here


Posted By: AirStyle
Date Posted: 14 June 2014 at 12:57pm
@Latch: Ok. I don't want to just jump into the conversation like this, but I'm looking at the link you gave A2J2TIWARI, and I don't understand what he's saying. Can you explain it at all?
< style="height: 80px; width: 444px; border: 1px solid grey; padding: 2px;"><>< value="af">Afrikaans< value="sq">Albanian< value="ar">Arabic< value="hy">Armenian< value="az">Azerbaijani< value="eu">Basque< value="be">Belarusian< value="bg">Bulgarian< value="ca">Catalan< value="zh-CN">Chinese (Simplified)< value="zh-TW">Chinese (Traditional)< value="hr">Croatian< value="cs">Czech< value="da">Danish< value="auto" ed="ed">Detect language< value="nl">Dutch< value="en">English< value="et">Estonian< value="tl">Filipino< value="fi">Finnish< value="fr">French< value="gl">Galician< value="ka">Georgian< value="de">German< value="el">Greek< value="ht">Haitian Creole< value="iw">Hebrew< value="hi">Hindi< value="hu">Hungarian< value="is">Icelandic< value="id">Indonesian< value="ga">Irish< value="it">Italian< value="ja">Japanese< value="ko">Korean< value="la">Latin< value="lv">Latvian< value="lt">Lithuanian< value="mk">Macedonian< value="ms">Malay< value="mt">Maltese< value="no">Norwegian< value="fa">Persian< value="pl">Polish< value="pt">Portuguese< value="ro">Romanian< value="ru">Russian< value="sr">Serbian< value="sk">Slovak< value="sl">Slovenian< value="es">Spanish< value="sw">Swahili< value="sv">Swedish< value="th">Thai< value="tr">Turkish< value="uk">Ukrainian< value="ur">Urdu< value="vi">Vietnamese< value="cy">Welsh< value="yi">Yiddish<>< value="af">Afrikaans< value="sq">Albanian< value="ar">Arabic< value="hy">Armenian< value="az">Azerbaijani< value="eu">Basque< value="be">Belarusian< value="bg">Bulgarian< value="ca">Catalan< value="zh-CN">Chinese (Simplified)< value="zh-TW">Chinese (Traditional)< value="hr">Croatian< value="cs">Czech< value="da">Danish< value="nl">Dutch< value="en" ed="ed">English< value="et">Estonian< value="tl">Filipino< value="fi">Finnish< value="fr">French< value="gl">Galician< value="ka">Georgian< value="de">German< value="el">Greek< value="ht">Haitian Creole< value="iw">Hebrew< value="hi">Hindi< value="hu">Hungarian< value="is">Icelandic< value="id">Indonesian< value="ga">Irish< value="it">Italian< value="ja">Japanese< value="ko">Korean< value="la">Latin< value="lv">Latvian< value="lt">Lithuanian< value="mk">Macedonian< value="ms">Malay< value="mt">Maltese< value="no">Norwegian< value="fa">Persian< value="pl">Polish< value="pt">Portuguese< value="ro">Romanian< value="ru">Russian< value="sr">Serbian< value="sk">Slovak< value="sl">Slovenian< value="es">Spanish< value="sw">Swahili< value="sv">Swedish< value="th">Thai< value="tr">Turkish< value="uk">Ukrainian< value="ur">Urdu< value="vi">Vietnamese< value="cy">Welsh< value="yi">Yiddish
English (auto-detected) ? English



Posted By: A2J2TIWARI
Date Posted: 23 June 2014 at 3:45pm

I am completely out of ideas about how to make his scroll look like a scroll and how to do mountains. I am really fed up that I havent touched it for few days.


Posted By: jalonso
Date Posted: 23 June 2014 at 4:05pm
The right side mountains looks fine. Stop stressing out.
The scroll is ok too. I would make the middle as wide as the rolled part because there's not that much perspective to be used on that.

-------------
http://www.pixeljoint.com/forum/forum_posts.asp?TID=9378&FID=6&PR=3 - PJs FAQ <•> http://www.pixeljoint.com/forum/forum_topics.asp?FID=6 - Sticky Reads


Posted By: ZachyEatWorld
Date Posted: 23 June 2014 at 7:52pm
I agree. Honestly, it looks great. Your mountain is very cool and the scroll looks awesome. It's crazy hour far you've come from the original.


Posted By: A2J2TIWARI
Date Posted: 29 June 2014 at 11:13am

Let me know if the grass and lake textures look good or not. I am experimenting so that I can learn something new.


Posted By: jalonso
Date Posted: 29 June 2014 at 4:47pm
The whole grass water and trees are weak in design, layout and pixelling.
Here is some inspiration ref for you by Gas13
http://www.pixeljoint.com/files/icons/full/space_bath_by_gas13.png">



-------------
http://www.pixeljoint.com/forum/forum_posts.asp?TID=9378&FID=6&PR=3 - PJs FAQ <•> http://www.pixeljoint.com/forum/forum_topics.asp?FID=6 - Sticky Reads


Posted By: Delicious
Date Posted: 01 July 2014 at 1:34pm
The scroll looks great so far. The colors are a vast improvement of what was before.

The rendering on the mountain strikes me as a bit odd. Perhaps you should look at references of mountains for proper formations and texture. Studying environments for a bit will help you develop convincing landscapes.



Posted By: SuperTurnip
Date Posted: 02 July 2014 at 10:49am
This is looking great. I find that the mountain isn't that bad--in fact, it's competently drawn and unobtrusive, perfect for a menu or background. What you could do to improve the rendering (thank you Delicious for the fine term) is to research how snow clings to mountain peaks and gets stuck in crevices. A bit of glacier wouldn't go amiss for the sake of authenticity.
Another thing that you could do would be adding reflections to the water, namely of the mountain itself. It's looking good, keep it up.



Print Page | Close Window