WIP (Work In Progress)
 Pixel Joint Forum : Pixel Art : WIP (Work In Progress)
Message Icon Topic: [WIP] RPG HUD/GUI mock-up Post Reply Post New Topic
Author Message
RileyFiery
Midshipman
Midshipman
Avatar

Joined: 11 October 2020
Online Status: Offline
Posts: 78
Quote RileyFiery Replybullet Topic: [WIP] RPG HUD/GUI mock-up
    Posted: 28 June 2012 at 2:59pm
CnC is kindly welcomed. Please don't hold back.

Well here's my latest WIP. I'm working on the HUD/GUI for a project of mine. I could use some good suggestions to help me improve the icons, layout, and overall look.

Top-Left is the HUD that displays your HP, MP, and XP along with your equipped weapon, and secondary item.

On the bottom is the menu icons and skill-hotkey bar.
The Big Squares [Menu Buttons] are (left to right) Character, Social, Journal, Skills, Inventory, and Options.

In the middle at the bottom is the skill-hotkey. The arrow above it pointing down allows you to collapse the bar into 5 hotkeys rather than 10. When it's smaller, there's an arrow pointing up that you can click to expand it to 10 again. The magic icons on the skill-hotkey bar are (left to right) Fire Ball, Magic Missile, and Poison Shot.

IP IP Logged
LachieD
Midshipman
Midshipman
Avatar

Joined: 25 May 2017
Online Status: Offline
Posts: 72
Quote LachieD Replybullet Posted: 28 June 2012 at 4:00pm
I really like what you are showing here. The icons seems perfect to me. Great work on. Sorry, no CC.

Do you have more tiles/sprites to show? Would love to see them.
IP IP Logged
ollantaytambo
Midshipman
Midshipman

IGNORE ME

Joined: 12 February 2012
Online Status: Offline
Posts: 50
Quote ollantaytambo Replybullet Posted: 28 June 2012 at 4:14pm
the character's eyes look weird, is he supposed to look worried?
IP IP Logged
RileyFiery
Midshipman
Midshipman
Avatar

Joined: 11 October 2020
Online Status: Offline
Posts: 78
Quote RileyFiery Replybullet Posted: 28 June 2012 at 4:35pm
I'm not sure about the icons. I like them, but I feel like something could be added, or changed to make them even better. Sadly, I don't know what.

Yeah, I see that now ollantaytambo. I rushed the helmet before I made this thread just so he wouldn't be a plain. You can see him without the helmet, and armor in my gallery:
http://www.pixeljoint.com/pixelart/71146.htm

Here are some of the inside tiles I threw together:


I need to go back over these later and fix them up some. Right now my main focus is the HUD and GUIs.



Edited by RileyFiery - 28 June 2012 at 4:52pm
IP IP Logged
LachieD
Midshipman
Midshipman
Avatar

Joined: 25 May 2017
Online Status: Offline
Posts: 72
Quote LachieD Replybullet Posted: 28 June 2012 at 4:57pm
Wow! This looks neat. But there is a cool tutorial about tiles, that might be interesting to you, in the sense of adding depth to the floor: http://kiwinuptuo.deviantart.com/gallery/27054576#/d3d4ufx


Also, if someone would put a gun on my head and told me to edit one of your icons, I would deliver this:



Really, I think you are fine. One could nitpick forever.
IP IP Logged
RileyFiery
Midshipman
Midshipman
Avatar

Joined: 11 October 2020
Online Status: Offline
Posts: 78
Quote RileyFiery Replybullet Posted: 28 June 2012 at 5:10pm
I like your edit of the Journal icon. The shadow is a good idea, as well as the black line in the middle of the white on the cover.

Also that's a good guide. I was thinking about adding some breaks and bends to the floor later on. I almost threw my computer to the ground while working on some of the outside tiles. Sort-of taking a break from them to finish up this HUD/GUI combo.

Edit:
Here's a shot at cleaning up the journal icon:

Left Old
Right New
Trying to keep the gold trim on it.

Edit2:
Also, I fixed the sad look on the character's eyes.


Edit3:
Messed around with the character's base some to fix the sad eye thing that I only just noticed thanks to ollantaytambo. Also defined the shoulders, and legs a lil' better.



Edited by RileyFiery - 28 June 2012 at 11:14pm
IP IP Logged
RileyFiery
Midshipman
Midshipman
Avatar

Joined: 11 October 2020
Online Status: Offline
Posts: 78
Quote RileyFiery Replybullet Posted: 30 June 2012 at 5:50pm
Well I edited the Options icon thanks to some feedback from a friend.


Here's the screenshot with the updated male character and icons:


I still have a few more icons to fix up, and I still need to decide on what to put for the character menu.

I was planning to add races to the game, e.g, orcs and elves. Right now in the screenshot I have the Aryan race completed. I figured while I'm at it, I can make each race have a salute of sorts. The Aryan race will tap their feet together and throw their right arm in the air as if asking a question, but at an angle. /joking of course.

Edit:
Just so everyone knows, constructive criticism is welcomed. Seriously, don't hold back. The sole purpose of me posting a WIP is to get some feedback.

Fixed up the backpack icon some.



Edited by RileyFiery - 02 July 2012 at 2:01am
IP IP Logged
RileyFiery
Midshipman
Midshipman
Avatar

Joined: 11 October 2020
Online Status: Offline
Posts: 78
Quote RileyFiery Replybullet Posted: 18 July 2012 at 3:54am
Last progression I did on the main HUD/GUI combo: Cleaned up the Inventory icon. Was sketching the Character menu icon, and was messing with a different idea for the Social icon.


Anyhow, the real update is that I'm currently working on a sign for NPC/Character dialogue, signs, notifications, etcetera:


The text is a placeholder text for now. I'll probably make my own text later. I was also thinking of adding in a portrait box to show what it is talking. Picture of a sign for a sign, picture of the NPC you're talking to, etcetera. I was going for a stained old paper sort of look.
IP IP Logged
Yuran
Commander
Commander
Avatar

Joined: 10 November 2024
Online Status: Offline
Posts: 329
Quote Yuran Replybullet Posted: 18 July 2012 at 4:27am
Not enough of the general style, frames around the icons completely faceless. You did not tell your idea. The icons look bad on a gray background, they merge with the background, Mark or background or icons. Or should we think about their design. The main thing is not to use a lot of small details.

You took a lot of work to do at once.
I suggest to systematize process of work. Make a plan.
For example:
1. Analysis of ideas, creating the overall design of the interface
2. Creating icons
3. Creating a character
4. Font Design Ornamental and some elements of the interface.


Не хватает общего стиля, рамочки вокруг иконок абсолютно безлики. Ты не рассказал свою идею. Иконки плохо смотрятся на сером фоне, они сливаются с фоном, выдели или фон или иконки. Или надо подумать над их дизайном. Главное не использовать много маленьких детальей.
Ты взялся делать много работы сразу.
Предлагаю систематизировать процесс работы. Сделай план работ (список).
Например:
1. Разбор идеи, создание общего дизайна оформления Интерфейса
2. Создание иконок
3. Создание персонажей
4. Дизайн шрифта и некоторых декоротивных элементов интерфейса.


Edited by Yuran - 18 July 2012 at 4:45am
IP IP Logged
RileyFiery
Midshipman
Midshipman
Avatar

Joined: 11 October 2020
Online Status: Offline
Posts: 78
Quote RileyFiery Replybullet Posted: 18 July 2012 at 4:37am
Thanks for the feedback.

I didn't explain the idea of the social because I was only stating why it was different than before. The outside frames are meant to be plain because that's the style that will transfer to every other HUD/GUI element as you can tell from looking at the HP/MP bar, menu icons, and hotkey icons.

I don't understand the rest of your post. If you'd like to show me an example of some changes you would personally make then by all means do so because it would help me to understand where you're coming from. I appreciate all comments and criticism.


Edited by RileyFiery - 18 July 2012 at 4:37am
IP IP Logged
Yuran
Commander
Commander
Avatar

Joined: 10 November 2024
Online Status: Offline
Posts: 329
Quote Yuran Replybullet Posted: 18 July 2012 at 5:32am
OK, I'll say specifically - I criticize the course of your work.
As I understood from what has turned out to translate by Google you will have to do what - could not understand. Write a list of what to do (the name - looks like) ... And you should definitely show how they will look like while playing?
I want to help you, but do not know exactly what you need. Making the pieces, some fixes various icons - not a good. This will lead to a large number of rework and bug fixes.

ОК, скажу конкретнее - я критикую ход твоей работы.
Как я понял из того что получилось перевести гуглом тебе надо сделать иконки какие именно - не смог понять. Напиши список того что надо сделать (наименование - как выглядит)... А тебе обязательно надо показывать как они будут выглядить во время игры?
Мне хочется тебе помочь, но пока не понимаю что тебе конкретно надо. Делать по кусочкам, отдельные исправления разных иконок - не есть правельно. Это приведёт к большому числу переделываний и исправлений..
IP IP Logged
RileyFiery
Midshipman
Midshipman
Avatar

Joined: 11 October 2020
Online Status: Offline
Posts: 78
Quote RileyFiery Replybullet Posted: 18 July 2012 at 5:59am
My goal for this thread was mainly for the HUD/GUI. I wanted feedback on how to fix the icons which is why you see icon edits throughout the thread. I eventually had to get some feedback from someone not on PJ for a couple of them.

I've been asking for C&C on the icons, layout, and overall look of the HUD/GUI.
Originally posted by RileyFiery

Well here's my latest WIP. I'm working on the HUD/GUI for a project of mine. I could use some good suggestions to help me improve the icons, layout, and overall look.
This is in my first post.

If it helps you then ignore the tiles. I posted those on request. Pay attention solely to the HUD/GUI mock-up(s) you see based off of the first post. Ignore the character, background tile, and ignore the dialogue.

Originally posted by Yuran

Not enough of the general style, frames around the icons completely faceless. You did not tell your idea. The icons look bad on a gray background, they merge with the background, Mark or background or icons. Or should we think about their design. The main thing is not to use a lot of small details.
^This is what I asked for. The bold is what I didn't understand.
IP IP Logged
Yuran
Commander
Commander
Avatar

Joined: 10 November 2024
Online Status: Offline
Posts: 329
Quote Yuran Replybullet Posted: 18 July 2012 at 12:37pm
Oh my God! As I want to write in my native language, I want all to understand and make myself understood, too .... My bad English .... I guess my posts to you like Chinese writing translated by Google. But I'm lazy to spend 15 minutes at each office. Ok'll help you, and then feeling quite boring :).

О боже! Как я хочу писать на родном языке, хочу всех понимать и чтоб меня понимали тоже.... Мой плохой английский.... Наверное для тебя мои посты как китайские письмена переведённые гуглом. Но я ленюсь тратить по 15 минут на каждый свой пост. Ок займусь помочь тебе, а то чуствую себя нудным..

Edited by Yuran - 18 July 2012 at 2:29pm
IP IP Logged
Yuran
Commander
Commander
Avatar

Joined: 10 November 2024
Online Status: Offline
Posts: 329
Quote Yuran Replybullet Posted: 18 July 2012 at 12:50pm

What the meaning of these icons?

Edited by Yuran - 18 July 2012 at 12:51pm
IP IP Logged
Yuran
Commander
Commander
Avatar

Joined: 10 November 2024
Online Status: Offline
Posts: 329
Quote Yuran Replybullet Posted: 18 July 2012 at 2:26pm
knives and hp bottles :)

characters.
shields.
gear/options

Edited by Yuran - 19 July 2012 at 3:10am
IP IP Logged
Post Reply Post New Topic
Printable version Printable version

Forum Jump
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot delete your posts in this forum
You cannot edit your posts in this forum
You cannot create polls in this forum
You cannot vote in polls in this forum