Difference between revisions of "Graphics Work"

From WebOS-Ports
Jump to navigation Jump to search
Line 168: Line 168:
 
! File preview
 
! File preview
 
! width="85pt" | In rootfs?
 
! width="85pt" | In rootfs?
 +
 +
|-
 +
| appname-background.png
 +
| appname-background@4x.png
 +
| align="center" | Isandunk
 +
| align="center" | WIP
 +
| align="center" | [[File:appname-background@4x.png|75px]]
 +
| align="center" | No
  
 
|-
 
|-

Revision as of 10:45, 13 May 2013

Open webOS contains a large quantity of graphical assets that are based at 72dpi, the original pixel density of the Touchpad in PNG-24 format. Most of these images reside in Luna, as part of the UI.

Unfortunately, the source files for these assets have not been open sourced.

Therefore, as we begin to port to devices that have higher pixel densities, we will require graphics of a much greater size to display clearly on these screens. In order to solve this requirement, we will need to recreate the existing ones in a scalable/future-proof format.

Specifications / Guidelines

What we have:

  • 1x size baseline: The existing graphic set is formatted for a 10-inch screen at 1024x768.

What we need right now:

  • 1.75x size for phones: For phones such as the GNex, we need graphics that are formatted for a 4-inch screen at 1280x800.
  • 2x size for future tablets: For future high-res tablets (as this is the direction the market is going), we need graphics that are formatted for a 10-inch screen at 2560x1600.

What should have for the future:

  • 4x size for future-proofing: As displays have recently doubled in size, what's to say they won't do the same again? Or perhaps Open webOS will be ported to something with a 4k screen in future? Naturally we don't know, so it's best to be safe and aim high.

What to do:

  • Each recreation must be exactly 4x the size of the original image and match the original as closely as possible in terms of style - consistency is vital if Open webOS is to look like a professional product.
    • Please bear in mind that most assets have some kind of alpha transparency (hence the requirement for PNG-24 assets) which can affect their final appearance in situ.
  • Current assets have been recreated in Photoshop or Illustrator. It is recommended that any work you do is in one of these two Adobe products, as it allows for interoperability at a later date if required.
    • If you are working in Photoshop, please draw all shapes as vectors and apply layer styles to each layer so that you are not working 'destructively' and so that your work can be easily transfered to another PSD if needed.
  • In terms of format, please provide both a resolution independent PSD/AI/EPS/SVG source file (if possible) and a 4x sized PNG-24 file.


Assets

Assignees

When you start work on an asset, add it's filename and your username below. This way, we can coordinate and make sure people don't do unnecessary work.

When you finish work on a given asset, please mark it as complete, upload it's PNG to the wiki via Special:Upload and add it to the page along with a link to the PSD/SVG source file.


Note: Some image previews on this page may be smaller than the actual high resolution asset. Please be sure to grab the correct copy by clicking the image if needed.

Core Application image assets

There are several assets required for recreation in each of the Core Apps that come bundled with Open webOS. Please refer to each particular page for relevant assets:

Files

Deprecated Graphics

The files listed below are believed to have been deprecated and are no longer in use. If you find any more, please add them below. Note: It is not necessary to recreate the HP bootlogo, as we will be using the webOS-ports logo instead (see top-left of wiki.)

General UI

Filename Deprecated by Confirmed by
activity-indicator-32x32.png Isandunk
back-button.png Isandunk
dock-item-shadow-tile.png Isandunk
empty-launcher.png Isandunk
fade-arrow-down.png Isandunk
hp-logo.png Isandunk
hp-logo-bright.png Isandunk
loading-card-scrim.png Isandunk
menu-selection-gradient-last.png Isandunk
meta-move.png Isandunk
overlay-banner-bg.png Isandunk
popup-scrollfade-bottom.png Isandunk
quick_launch_highlight.png Isandunk
reorder-ripple.png Isandunk
search-bottom-fade.png Isandunk
search-pill-no-icon.png Isandunk

Dockmode

Filename Deprecated by
dropdown-bg-row-highlight.png Isandunk

Assets

Status Bar

1x Filename 4x Filename Assigned to Status File preview In rootfs?
appname-background.png appname-background@4x.png Isandunk WIP Appname-background@4x.png No
bluetooth-connected.png bluetooth-connected@4x.png Appstache Complete Bluetooth-connected@4x.png Yes
bluetooth-connecting.png bluetooth-connecting@4x.png Appstache Complete Bluetooth-connecting@4x.png Yes
bluetooth-error.png bluetooth-error@4x.png Appstache Complete Bluetooth-error@4x.png Yes
bluetooth-on.png bluetooth-on@4x.png Appstache Complete Bluetooth-on@4x.png Yes
icon-mute.png icon-mute@4x.png Appstache Complete Icon-mute@4x.png Yes
icon-mute-off.png icon-mute-off@4x.png Appstache Complete Icon-mute-off@4x.png Yes
icon-rotation-lock.png icon-rotation-lock@4x.png Appstache Complete Icon-rotation-lock@4x.png Yes
icon-rotation-lock-off.png icon-rotation-lock-off@4x.png Appstache Complete Icon-rotation-lock-off@4x.png Yes
battery-0.png battery-0@4x.png Isandunk Complete Battery-0@4x.png Yes
battery-1.png battery-1@4x.png Isandunk Complete Battery-1@4x.png Yes
battery-2.png battery-2@4x.png Isandunk Complete Battery-2@4x.png Yes
battery-3.png battery-3@4x.png Isandunk Complete Battery-3@4x.png Yes
battery-4.png battery-4@4x.png Isandunk Complete Battery-4@4x.png Yes
battery-5.png battery-5@4x.png Isandunk Complete Battery-5@4x.png Yes
battery-6.png battery-6@4x.png Isandunk Complete Battery-6@4x.png Yes
battery-7.png battery-7@4x.png Isandunk Complete Battery-7@4x.png Yes
battery-8.png battery-8@4x.png Isandunk Complete Battery-8@4x.png Yes
battery-9.png battery-9@4x.png Isandunk Complete Battery-9@4x.png Yes
battery-10.png battery-10@4x.png Isandunk Complete Battery-10@4x.png Yes
battery-11.png battery-11@4x.png Isandunk Complete Battery-11@4x.png Yes
battery-charged.png battery-charged@4x.png Isandunk Complete Battery-charged@4x.png Yes
battery-charging-0.png battery-charging-0@4x.png Isandunk Complete Battery-charging-0@4x.png Yes
battery-charging-1.png battery-charging-1@4x.png Isandunk Complete Battery-charging-1@4x.png Yes
battery-charging-2.png battery-charging-2@4x.png Isandunk Complete Battery-charging-2@4x.png Yes
battery-charging-3.png battery-charging-3@4x.png Isandunk Complete Battery-charging-3@4x.png Yes
battery-charging-4.png battery-charging-4@4x.png Isandunk Complete Battery-charging-4@4x.png Yes
battery-charging-5.png battery-charging-5@4x.png Isandunk Complete Battery-charging-5@4x.png Yes
battery-charging-6.png battery-charging-6@4x.png Isandunk Complete Battery-charging-6@4x.png Yes
battery-charging-7.png battery-charging-7@4x.png Isandunk Complete Battery-charging-7@4x.png Yes
battery-charging-8.png battery-charging-8@4x.png Isandunk Complete Battery-charging-8@4x.png Yes
battery-charging-9.png battery-charging-9@4x.png Isandunk Complete Battery-charging-9@4x.png Yes
battery-charging-10.png battery-charging-10@4x.png Isandunk Complete Battery-charging-10@4x.png Yes
battery-charging-11.png battery-charging-11@4x.png Isandunk Complete Battery-charging-11@4x.png Yes
battery-error.png battery-error@4x.png Isandunk Complete Battery-error@4x.png Yes
network-1x-active.png network-1x-active@4x.png
network-1x-connected.png network-1x-connected@4x.png
network-1x-dormant.png network-1x-dormant@4x.png
network-3g-active network-3g-active@4x.png
network-3g-connected.png network-3g-connected@4x.png
network-3g-dormant.png network-3g-dormant@4x.png
network-edge-connected.png network-edge-connected@4x.png
network-edge-active.png network-edge-active@4x.png
network-evdo-connected.png network-evdo-connected@4x.png
network-evdo-active.png network-evdo-active@4x.png
network-evdo-dormant.png network-evdo-dermant@4x.png
network-gprs-active.png network-gprs-active@4x.png
network-gprs-connected.png network-gprs-connected@4x.png
network-hsdpa-active.png network-hsdpa-active@rx.png
network-hsdpa-connected.png network-hsdpa-connected@4x.png
network-hsdpa-plus-connected.png network-hsdpa-plus-connected@4x.png
network-roaming-triangle.png network-roaming-triangle@4x.png
network-roaming.png network-roaming@4x.png
network-umts-active.png network-umts-active@4x.png
network-umts-connected.png network-umts-connected@4x.png
network-lte-connected.png network-lte-connected@4x.png
network-lte-active.png network-lte-active@4x.png
network-lte-dormant.png network-let-dormant@4x.png


rssi-flightmode.png rssi-flightmode@4x.png
rssi-0.png rssi-0@4x.png
rssi-1.png rssi-1@4x.png
rssi-1x-0.png rssi-1x-0@4x.png
rssi-1x-1.png rssi-1x-1@4x.png
rssi-1x-2.png rssi-1x-2@4x.png
rssi-1x-3.png rssi-1x-3@4x.png
rssi-1x-4.png rssi-1x-4@4x.png
rssi-1x-5.png rssi-1x-5@4x.png
rssi-2.png rssi-2@4x.png
rssi-3.png rssi-3@4x.png
rssi-3G-0.png rssi-3G-0@4x.png
rssi-3G-1.png rssi-3G-1@4x.png
rssi-3G-2.png rssi-3G-2@4x.png
rssi-3G-3.png rssi-3G-3@4x.png
rssi-3G-4.png rssi-3G-4@4x.png
rssi-3G-5.png rssi-3G-5@4x.png
rssi-4.png rssi-4@4x.png
rssi-5.png rssi-5@4x.png
rssi-error.png rssi-error@4x.png
rssi-ev-0.png rssi-ev-0@4x.png
rssi-ev-1.png rssi-ev-1@4x.png
rssi-ev-2.png rssi-ev-2@4x.png
rssi-ev-3.png rssi-ev-3@4x.png
rssi-ev-4.png rssi-ev-4@4x.png
rssi-ev-5.png rssi-ev-5@4x.png
rssi-lte-0.png rssi-lte-0@4x.png
rssi-lte-1.png rssi-lte-1@4x.png
rssi-lte-2.png rssi-lte-2@4x.png
rssi-lte-3.png rssi-lte-3@4x.png
rssi-lte-4.png rssi-lte-4@4x.png
rssi-lte-5.png rssi-lte-5@4x.png

Screen Lock

1x Filename 4x Filename Assigned to Status File preview In rootfs?


screen-lock-clock-0.png screen-lock-clock-0@4x.png Isandunk Complete Screen-lock-clock-0@4x.png Yes
screen-lock-clock-1.png screen-lock-clock-1@4x.png Isandunk Complete Screen-lock-clock-1@4x.png Yes
screen-lock-clock-2.png screen-lock-clock-2@4x.png Isandunk Complete Screen-lock-clock-2@4x.png Yes
screen-lock-clock-3.png screen-lock-clock-3@4x.png Isandunk Complete Screen-lock-clock-3@4x.png Yes
screen-lock-clock-4.png screen-lock-clock-4@4x.png Isandunk Complete Screen-lock-clock-4@4x.png Yes
screen-lock-clock-5.png screen-lock-clock-5@4x.png Isandunk Complete Screen-lock-clock-5@4x.png Yes
screen-lock-clock-6.png screen-lock-clock-6@4x.png Isandunk Complete Screen-lock-clock-6@4x.png Yes
screen-lock-clock-7.png screen-lock-clock-7@4x.png Isandunk Complete Screen-lock-clock-7@4x.png Yes
screen-lock-clock-8.png screen-lock-clock-8@4x.png Isandunk Complete Screen-lock-clock-8@4x.png Yes
screen-lock-clock-9.png screen-lock-clock-9@4x.png Isandunk Complete Screen-lock-clock-9@4x.png Yes
screen-lock-clock-colon.png screen-lock-clock-colon@4x.png Isandunk Complete Screen-lock-clock-colon@4x.png Yes
screen-lock-clock-decimal.png screen-lock-clock-decimal@4x.png Isandunk Complete Screen-lock-clock-decimal@4x.png Yes
Screen-lock-incoming-call-off.png Screen-lock-incoming-call-off@4x.png Isandunk Complete Screen-lock-incoming-call-off@4x.png Yes
Screen-lock-incoming-call-on.png Screen-lock-incoming-call-on@4x.png Isandunk In progress Screen-lock-incoming-call-on@4x.png Yes
Screen-lock-padlock-off.png Screen-lock-padlock-off@4x.png Appstache Complete Screen-lock-padlock-off@4x.png Yes
Screen-lock-padlock-on.png Screen-lock-padlock-on@4x.png Appstache Complete Screen-lock-padlock-on@4x.png Yes
screen-lock-target-scrim.png screen-lock-target-scrim@4x.png Appstache Complete Screen-lock-target-scrim@4x.png Yes
screen-lock-wallpaper-mask-bottom.png screen-lock-wallpaper-mask-bottom@4x.png Isandunk Complete Screen-lock-wallpaper-mask-bottom@4x.png Yes

General UI

1x Filename 4x Filename Assigned to Status File preview In rootfs?
activity-indicator-32x32.png activity-indicator-128x128.png Appstache Drafting (awaiting upload) No
activity-progress.png activity-progress@4x.png Appstache Drafting (awaiting upload) No
activity-spinner.png activity-spinner@4x.png Appstache Drafting (awaiting upload) No
activity-static.png activity-static@4x.png Appstache Complete Activity-static@4x.png Yes
default-app-icon.png default-app-icon@4x.png Appstache Complete Default-app-icon@4x.png Yes
empty-launcher.png empty-launcher@4x.png Appstache Complete Empty-launcher@4x.png Yes
fullscreen-play-button.png fullscreen-play-button@4x.png Appstache Complete Fullscreen-play-button@4x.png Yes
loading-strip.png loading-strip@4x.png Appstache Complete Loading-strip@4x.png Yes


normal-bg.png normal-bg@4x.png (WARNING: 10MB file) Isandunk Complete Normal-bg@4x.png Yes
overlay-banner-bg.png overlay-banner-bg@4x.png Isandunk Complete (Deprecated) Overlay-banner-bg@4x.png Yes
penindicator-ripple.png penindicator-ripple@4x.png Isandunk Complete Penindicator-ripple@4x.png Yes
popup-bg.png popup-bg@4x.png Isandunk Complete Popup-bg@4x.png Yes
scrim.png scrim@4x.png Isandunk Complete Scrim@4x.png Yes
search-pill.png search-pill@4x.png Appstache Complete (Obsolete) Search-pill@4x.png Yes
search-field-bg-launcherx.png search-field-bg-launcher@4x.png Appstache Complete Search-field-bg-launcher@4x.png Yes
search-button-launcherx.png search-button-launcher@4x.png Appstache Complete Search-button-launcher@4x.png Yes
spinner.png spinner@4x.png Appstache Drafting 75px No
wm-corner-bottom-left wm-corner-bottom-left@4x.png Isandunk Complete Wm-corner-bottom-left@4x.png Yes
wm-corner-bottom-right wm-corner-bottom-right@4x.png Isandunk Complete Wm-corner-bottom-right@4x.png Yes
wm-corner-top-left wm-corner-top-left@4x.png Isandunk Complete Wm-corner-top-left@4x.png Yes
wm-corner-top-right wm-corner-top-right@4x.png Isandunk Complete Wm-corner-top-right@4x.png Yes

PIN

1x Filename 4x Filename Assigned to Status File preview In rootfs?


button-black.png button-black@4x.png Isandunk Complete Button-black@4x.png No
button-black-press.png button-black-press@4x.png Isandunk Complete Button-black-press@4x.png No
button-green.png button-green@4x.png Isandunk Complete Button-green@4x.png No
button-green-press.png button-green-press@4x.png Isandunk Complete Button-green-press@4x.png No
icon-delete.png icon-delete@4x.png Isandunk Complete Icon-delete@4x.png Yes
password-lock-field.png password-lock-field@4x.png Isandunk Complete Password-lock-field@4x.png Yes
pin-grid.png pin-grid@4x.png Isandunk Complete Pin-grid@4x.png Yes
pin-key-highlight.png pin-key-highlight@4x.png Isandunk Complete Pin-key-highlight@4x.png Yes

Application icons

Generic items

Name Assigned to Status File preview In rootfs?
Application icon generic background isandunk Complete WebOS-app-icon-background.png N/A
Settings icon generic background isandunk Complete WebOS-settings-background.png N/A

Memos / Notes

1x Filename 4x Filename Assigned to Status File preview In rootfs?
icon.png memos-icon@4x.png isandunk Complete Memos-icon@4x.png No
icon-256x256.png memos-icon-256x256@4x.png isandunk Complete Memos-icon-256x256@4x.png No

Preware

1x Filename 4x Filename Assigned to Status File preview In rootfs?
icon.png preware-icon@4x.png virox Complete Preware-icon@4x.png ?

Settings

1x Filename 4x Filename Assigned to Status File preview In rootfs?
icon.png settings-icon@4x.png

New/Custom Work

Since we'll probably be adding/reimplementing things in the long-run, we're going to be needing some brand new graphics. Requests (new and finished) go here.

Filename Description Assigned to Status File preview In rootfs?


ports-logo-normal.png The webOS Ports logo, for use on the bootscreen. Appstache Complete Ports-logo-normal.png No
ports-logo-glow.png The webOS Ports logo, for use on the bootscreen. (Glowing) Appstache Complete Ports-logo-glow.png No
emoticon-frown.png Smiley- :( No
emoticon-cry.png Smiley- :'( No
emoticon-smile.png Smiley- :) No
emoticon-wink.png Smiley- ;) No
emoticon-yuck.png Smiley- :P No
emoticon-gasp.png Smiley- :O No
emoticon-heart.png Smiley- <3 No