Export for Web

Once you are happy with your new logo and submarks, it's time to export them so that you can use them individually and add them to your website. We have included some artboards that will ensure all of your graphics are large enough that they will be crystal clear on even the largest of retina screens. These artboards also have transparent backgrounds so you won't have any of those white boxes around your logo elements.

  • First, open the artboard that corresponds to the logo element you will be exporting (i.e. submark.psd)

  • Then, on logos.psd, right click the layer group of your edited logo (or submark, wordmark, favicon or pin it)

  • Select Duplicate Group (or Duplicate Layer for elements that are not in groups)

  • Under Destination, select the document that you would like it to be duplicated to (in this case, submark.psd)

  • Open up that new document, select the layer group and hit command + T (control + T).

  • If your artwork is not visible on the artboard, zoom out by hitting command + - (control + -) until you can see the artowork selected.

  • Move your artwork to the center of the document

  • Enlarge it by dragging a corner anchor while holding Shift + Option/Alt


You're now ready to export the file as PNG to use on your website or any design collateral.

  • Click File > Export > Export As...

  • Select PNG, check the Transparency box and Convert tosRGB box. Modify the dimensions as needed.

  • Click Export All... and select the location where you would like to save the file.

  • Don't forget to also save your new file as PSD so you can make any adjustments later if needed.