Generic Artwork

All our infrastructure uses standard artwork in a variety of ways. For instance, events, articles, and other content, displays header and social media sharing artwork.

Artwork is attached as file attachments to any entity (such as events or articles). They use category and sub-category assignments to identify the artwork as such.

It is important that we generate as much original art as possible, and assing it to various elements in all the required formats (see below) to ensure proper rendering and display of our “stuff” on different platforms and sites (such as our own web sites and mobile apps, as well as places such as Facebook, LinkedIn, and more). To make this possible and feasible, we have created a variety of tools and processes.

The Standard Art Creation Process

Many of our “assets” (such as articles, blog posts, events, consulting service offerings,...) require all the art assets listed below to be displayed in their most flexible and effective form. We therefore must create all these art assets as efficiently as possible. This is usually done through the use of Artificial Intelligence and Copilots.

The first step is usually to click the Generate Art toolbar button that can be found in various parts of our system (such as the article edit form, the blog post form, the event edit form, and more). This launches the following UI:

An Image Generation Prompt

The above UI is designed to use Artificial Intelligence (AI) to generate images (although it can also be used to manually load image files by using the Load Image button). The first element is the “image generation prompt”. This prompt can be used to generate images based on your ideas expressed in plain English. For instance, you can type “a dog riding a bicycle in the style of Pablo Picasso” and the AI will come up with an image that matches that request when you click the Suggest Image button. I just gave this one a try, and it came up with the following suggestion:

If you do not like the result, simply click the button again to get another suggestion (it will create something new every time), or, change your prompt to fine tune what you would like to create. I simply clicked the button again without changing the prompt, and it came up with the following suggestion:

As you can see, the results are quite different each time you try, and they might vary wildly, depending on the prompt you choose. (In my case, it will always be in the style of Picasso, but had I not specified that, my second version could be drastically different from the first).

However, it will be difficult to think of fresh new prompts every time you need an image. This is what the Suggest Prompt button is for. It is extremely useful, because it invokes a separate AI that then tries to use the current content (such as the text of an article or blog post) to come up with creative ideas for images related to the item at hand. Consider this prompt our AI happened to suggest for an article related to real-time communications:

Example Prompt created by the AI:
Create an image that represents real-time communication in web applications with a futuristic and modern art style. Incorporate elements like race cars or rocket ships to metaphorically represent the speed and efficiency of real-time updates. Use bold and vibrant colors to create a visually striking image. Avoid using letters and numbers unless absolutely necessary for conveying the concept. For inspiration, think of movies like The Matrix and Tron, and futuristic cityscapes. Depict clouds and chat bubbles to represent real-time updates and communication. Be creative and make it cool! - Possible Art Style(s): Futuristic and modern. Possibly useful inspirations: Sci-fi movies, futuristic cityscapes, technology interfaces. Possibly useful metaphors: Race car, rocket ship, lightning bolts, network of connections. Possibly useful pop-culture references: The Matrix, Tron, Black Mirror. Possibly useful visual ideas that could be included: Clouds, real-time updates, chat bubbles, notifications.

Again, the AI will come up with new suggestions every time you click that button. You can also edit the prompt, if you would like to fine-tune it or have your own ideas and suggestions.

Note that it is possible to double-click an image in the list to open a detailed view of the image:

Note that this shows the image as well as the original prompt used to generate the image (assuming the image is AI generated and wasn't loaded from disk locally). In addition, the AI provides a “revised” prompt. This is often a description of the image or a slightlyh altered prompt used to generate the image. It provides some good insight into how the AI “thinks” about the image it just created.

There also is a file name and a button to save the generated image as a local file.

Note: Our system currently uses the DALL-E 3 image generation AI. (This will change over time). If you would like to use a different AI, simply copy the prompt and paste it into the AI image generator of your choice. Then, download the created art and load it into this UI using the Load Image button.

Using Image Composer to Create Standard Art Assets

Once you are satisfied with an image generated by the AI above, select the imasge in the list and click the Open in Image Composer button to launch Olympus Image Composer (see below). This triggers Image Composer with an appropriate template for your scenario. This usually means that a set of images is being created that are required with the asset you are dealing with (for instance, a CODE Presents event will need header images of various formats, images suitable for sharing on social media, video cover images, and so on). The exact details depend on the scenario, but usually, the base image generated by the AI (above) is used as a background image that is overlayed with other elements, such as text, logos, and more. The text provided is also based on the asset at hand (for an event, it will be things like the event title, the date of the event, the name of the presenter, and the logo will be appropriate for the event, such as a CODE Presents logo, or a CODE State of .NET logo, and so on).

A detailed description of Image Composer's features can be found below, but some of the more interesting aspects of the above screen shot are:

Note that each image in the set is created somewhat intelligently. Not just is there an underlying template that defines which images are in a set and what they are like, but the generator also intelligently places elements, sets element sizes, adjusts font sizes, removes unused elements, and so on. Therefore, the default version of the compositions should be quite close to your needs. But it is OK to fine-tune elements, such as changing font sizes, moving elements around, adjusting versions of logos that are being used, and (this one happens most frequently of all), slightly adjust the position and size of the background image.

Once you are happy with your composition, click Save as Attachment, which causes the whole composition to be saved in the underlying element's file attachments (such as article file attachments, or event file attachments) in the form of an OIC (Olympus Image Composer) file. Furthermore, each image within the set is exported as a high-quality rendering (the preview is optimized for speed and may be a bit grainy) and also filed into attachments with appropriate categories and sub-categories set to ensure that the images serve the purpose they were intended for.

The only step that remains is (usually) to set the accent color of the item. Items such as articles, events, blog posts, and more, have accent color settings. Click on the color square of the accent color setting to open the color picker dialog. This dialog is now aware of the new images you created. You can now either manually pick a color that goes well with the image, or have the AI suggest a suitable accent color for you, but clicking the AI button.

Voila! You are now done creating a set of art assets for this item. As soon as the assets are saved, they will appear on web sites and other places.

Note: You can edit the OIC file at any point by double-clicking it in the file attachments list. It is also possible to attach multiple OIC files to a single item. However, when the assets get saved, it is possible to end up with multiple items in each category. This is not desired and you should manually delete the ones you do not want.

Note: It is also possible that the generation of these assets will override image files attached to an item, when their names happen to be the same. If all assets are created from OIC files, this is not a big deal, since they can easily be created from the OIC file. However, if the existing assets were created by some other means, one could end up accidently overriding other files.

Required Asset Formats

The following standard formats and categories/sub-categories are supported:

Note: Assets are not necessarily displayed in the actual pixel dimensions. Often, they are displayed smaller, but especially in mobile device scenarios, that will result in higher resolution dispay.

Example Usage scenarios

Olympus Image Composer

Detailed description of OIC features is currently a work in progress.

Previous
Next