1. We have added the ability to collapse/expand forum categories and widgets on forum home.
    Dismiss Notice
  2. Photobucket has changed its policy concerning hotlinking images and now requires an account with a $399.00 annual fee to allow hotlink. More information is available at: this link.
    Dismiss Notice
  3. All Civ avatars are brought back and available for selection in the Avatar Gallery! There are 945 avatars total.
    Dismiss Notice
  4. To make the site more secure, we have installed SSL certificates and enabled HTTPS for both the main site and forums.
    Dismiss Notice
  5. Civ6 is released! Order now! (Amazon US | Amazon UK | Amazon CA | Amazon DE | Amazon FR)
    Dismiss Notice
  6. Dismiss Notice
  7. Forum account upgrades are available for ad-free browsing.
    Dismiss Notice

PSD template for sponsors' icons

Discussion in 'CivBE - Tutorials and References' started by Artisanix, Nov 2, 2014.

  1. Artisanix

    Artisanix Chieftain

    Joined:
    Oct 6, 2013
    Messages:
    69
    [cheap advertisement mode on]
    With this you will be making icons like crazy!
    [cheap advertisement mode off]



    If you have any questions related to this template or info provided, just ask in this thread...


    Civilization: Beyond Earth - Sponsors' Icons PSD Template
    created by Artisanix (2014/11/02)


    This is not a tutorial per se but rather some kind of a description to Photoshop's template I've created.
    Such template is very flexible and robust, it can help modders to create icons for game's sponsors very quickly with the quality very close to originals. The main purpose of this template is to save time spent on technical aspects, thus the more time will be available then for much more creative activities ;)

    so let's get started...


    Sponsor Icons - details
    In short we can say that sponsor icons are just logos that identify the chosen faction in game. And these are used in many various places.

    As for technical details, to have a sponsor's logo, you need to create two images with the same logo but with different looks. And then resize those images to various dimensions and save as separate file each. These are reffered in game's code as Icon and Alpha Atlases.

    No matter how many variants you need to create overall, you always start the same: by creating sponsor's logo image with 128x128 dimensions and save it as IconAtlas* file, then you create black and white modified version of that logo and save as AlphaAtlas* file.
    (* actually you can name files in any way you want, but game reffers to those files with such names for convenience: IconAtlas - color version of logo, AlphaAtlas - b/w version of logo without frame)

    To better understand and use the template you should know how icons are constructed in the first place.

    Icon Atlases (logos in color) have following properties (the highest quality/dimensions image example):
    - the whole image dimensions 128x128 px (background not important - not visible in game)
    - logo frame dimensions 116x116 px (frame thickness 5 px - including 1 px black edge outside), can have gradients
    - logo frame background (area inside of the frame) 106x106 px, can have gradients
    - logo/symbol itself, can have gradients and subtle glow outside to blend in with frame's background
    - alpha channel: all white with 6 px thin black frame outside

    Alpha Atlases (logos in neutral color with alpha gradient) have following properties:
    - the source image dimensions 128x128 (this image is never used, but we create it from Icon Atlas version, so there's no point of resizing it at this point)
    - background all black (no frame, or frame background present)
    - the shape of the logo in all white
    - alpha channel black with the shape of the logo in white but with subtle gradient applied (light gray at top, white at bottom)


    INSTRUCTIONS:

    To use template to make a new Icon Atlas image:

    1. Make sure the following layers are turned off: FOR ALPHA (BKG), FOR ALPHA (WHITE LOGO), FOR ALPHA CHANNEL (GRADIENT).
    The rest of layers and effects should be turned on.

    2. You need to create a new logo/shape:
    - if you want to work relativly undistracted, you may want to reset all color schemes (gradients) to more neutral (e.g. just set gradient colors for FRAME layer to dark gray, for FRAME BKG to black, and for LOGO to white, and you may want to switch Outer Glow Effect off for LOGO layer as well)
    - to create new logo make layer LOGO active and click on vector mask, then delete content from there and start to draw your own shapes
    [note to those who have no experience working with vector graphic and are quite new to Photoshop: vector graphic may be the biggest obstacle you encounter here and even may decide whether you create that logo or not - but to get some tutorials and play with it a bit can be quite beneficial - it may have some steep learning curve, especially at the very beginning, but it's soo powerful later - if you know it, your limits know no bounds ;)

    3. After you finish with your logo/shape then just set all gradients (FRAME, FRAME BKG, LOGO) to your liking. Don't forget to enable Outer Glow for LOGO layer and set its colour to match that of frame's background (or not if you so desire ;)

    4. Save your image as ARGB 8888 dds file (e.g. SponsorsName_IconAtlas_128.dds). You may want to check the option to save with DXT5 compression if you like as well - though it may have some problems with gradients, but for solid color logos (some of originals are like this) it should not be a problem with this format.


    To use template to create Alpha Atlas from Icon Atlas:

    If you finished creating your Icon Atlas and exported it as dds successfully, to create color map and alpha channel for Alpha Atlas image do the following:
    1. enable FOR ALPHA (BKG) layer - it's black so it should hide the frame and frame's background (Alhpa Atlases don't have such features)
    2. enable FOR ALPHA (WHITE LOGO) layer - it should make logo shape in all white.
    3. disable Outer Glow effect for LOGO layer
    4.
    - add one empty layer on the top of stack, activate it, and press the most difficult keyboard shortcut in Photoshop ;) CTRL+ALT+SHIFT+E - this combination makes the composite image in one layer from all other enabled layers
    - select and copy newly created layer to clipboard (it should contain white logo on black background), then create new image with 128x128 dimensions, paste the clipboard's content, and merge with background - this will be your Alpha Atlas main file
    5.
    - return to the template,
    - delete that composite layer you created in previous step,
    - enable FOR ALPHA CHANNEL (GRADIENT) layer
    - do the same actions from previous point to create new composite image (this time image should have the same black background but the white logo/shape should have subtle gray gradient on it)
    - select and copy that layer to clipboard
    - switch to that new file for Alpha Atlas you created in previous step, and add new Alpha channel there, and paste the content from clipboard
    - save image as dds (e.g. Sponsor'sName_AlphaAtlas_128.dds)


    FINAL NOTES:
    At the end you should have two dds files: one with color icon (logo, frame, possibly gradients), and another with simpler content (just white logo on black background). The dimensions of files should be 128x128.

    And if you want to have all icon sizes you need for your mod, following information may be helpfull:

    The game uses sponsors' icons of these sizes:
    - for Icon Atlases - 128x128, 64x64, 45x45, 32x32
    - for Alpha Atlases - 48x48, 32x32, 24x24

    In game's code and in original files we can find other sizes:
    - for Icon Atlases - 80x80, 57x57
    - for Alpha Atlases - 128x128, 64x64, 57x57, 45x45, 16x16
    but I've found no icon at such sizes used in game (and I was quite "brutal" in my tests, but still, I may have missed something)

    In short, if you want to be on "safe side" you may want to resize the icons you created with or w/out this template to all these dimensions and save them in separate dds files, but definietly you need to make sure that you have those that game certainly uses (from the first list).


    FILES ATTACHED TO THIS POST:
    CBE_icon_sponsor_ingame.jpg - shows template icon in action ;)
    CBE_icon_sponsor_pslayers.jpg - view of layers in PSD template file with "connections"
    CBE_icon_sponsor_template.zip - archive with PSD file template and template icon converted already to proper DDS formats - the icon is free to use for anyone who likes it and wants to use it in his/hers CBE mods ;) The original version of the text in this post is also included in archive as rtf file, and jpg images too.
     

    Attached Files:

  2. kingchris20

    kingchris20 Wisdom Seeker

    Joined:
    Jul 30, 2012
    Messages:
    1,276
    Location:
    Resident of Heaven; Currently in the Waiting Room
    You are a saint! Bout to try this out now, thanks for posting!
     
  3. steveforez

    steveforez Chieftain

    Joined:
    Sep 18, 2014
    Messages:
    56
    Gender:
    Male
    Location:
    France
    When i add the alpha channel on my dds texture, look :


    can help me plz ?
     
  4. Artisanix

    Artisanix Chieftain

    Joined:
    Oct 6, 2013
    Messages:
    69
    If you use that program on screenshot you posted to create alpha, then it can't generate complex and accurate alpha properly, if at all. Use GIMP or PS to create alpha (though to create good alpha this process may require some "manul touches", as that's the human who decides mainly what parts should be black or white - not a machine).
     
  5. steveforez

    steveforez Chieftain

    Joined:
    Sep 18, 2014
    Messages:
    56
    Gender:
    Male
    Location:
    France
    on photoshop, I save my texture directly in dds 8.8.8.8. When I create the alpha channel, its gives me the same result toujour and I can not find a solution. :dunno: :wallbash:

    ok, now the bug is only with alpha white
     
  6. Hiram

    Hiram XML Plebian

    Joined:
    Dec 14, 2006
    Messages:
    1,077
    Location:
    Where The Streets Have No Name
  7. Hiram

    Hiram XML Plebian

    Joined:
    Dec 14, 2006
    Messages:
    1,077
    Location:
    Where The Streets Have No Name
    This may seem like a noob question (GIMP user, just started with PS), but how do you change the colours of the blends?

    Worked that out, but now I can't access the vector mask?
     
  8. Artisanix

    Artisanix Chieftain

    Joined:
    Oct 6, 2013
    Messages:
    69
    Hiram -
    to access vector mask in PS you need to click on it on layers panel (see attached picture) - the vector mask is marked by red X there, this red X means the mask is disabled (you enable/disable vector mask by clicking on it with SHIFT key pressed).

    Then to change the shapes (to work with points and lines/curves basically) you use vector tools from the Tools taskbar (on the right side of PS window by default) - these are four icons on the second attached picture).

    Anyway - as this template was made with vector graphic in mind, it can very well be used for raster painting/copying/masking logos and shapes after a few minor adjustments.
    For this you just:
    - disable vector mask (SHIFT + click on it)
    - create empty layer below LOGO layer with the name e.g RASTER LAYER
    - click to higlight LOGO layer and press CTRL+ALT+G to make it clip to layer below (see 3rd attached screenshot for reference).

    Then whatever you paint/paste on RASTER LAYER it will be affected by the gradient from the LOGO layer.
     

    Attached Files:

Share This Page