Concept

First is the concept, which could be driven by client requests, the requirement for a web page banner, or any other factors that support the project's goals.

Here's an example: A blog page requires a banner depicting a post-apocalyptic scene where an abandoned town is occupied by giant robots.

Sketch

Our designer will create a sketch based on the required concept. The sketch can be very simple, as exemplified below:

AI-generated Image with sketch and prompt

Afterward, we utilize stable diffusion to generate images using two main inputs:

1. We use the sketch, leveraging controlnet canny to guide the image layout. This helps in establishing the overall composition and structure of the artwork.

2. We use a prompt to guide the image's details. The prompt provided is "A giant robot stands on the ground, while a man accompanied by a girl observe it. The illustration is inspired by Simon Stålenhag's work, set in an abandoned town with volumetric backlighting."

This prompt assists in shaping the specific elements, atmosphere, and mood of the generated image. By combining these inputs, we can create distinctive and evocative illustrations that align with the desired concept.

The AI (stable diffusion), will generate a selection of images for the designer to choose from. The number of images generated will depend on the designer's specific requirements and preferences. They will have the opportunity to review the generated images and select the ones that best align with their vision and desired outcome.

Finally, we have selected this particular image for further development.

Extending images with Photoshop generative-fill

Given that the optimal resolution for stable diffusion is 1024x1024 pixels (currently), there may be instances where we utilize AI tools to upscale the image. However, in the case of this web page banner, we do not require upscaling. Instead, we need to extend the width of the image to ensure it fits the desired web page layout.

We found that the Photoshop's generative-fill feature has a better result compared to the out-painting of stable diffusion. Therefore, we used Photoshop's generative-fill to extend the image to 2048x1024 pixel.

we have selected the specific area of the image that requires filling. We then provided Photoshop with the prompt "an abandoned town in the background" to guide the generative fill process.

The number of images that Photoshop has been provided, the designer selected the most suitable one to create the banner.

Colour adjustment and layout creation

Next, just like traditional artwork production, the designer will proceed with color adjustments, adding titles and description text, and designing the layout to complete the banner production.

Conclusion

From sketch to completion, designers typically require less than an hour, with some projects being finished in just a few minutes. These projects involve creating customized artworks based on the given concept, which was previously unimaginable. The advent of AI has given us more time to generate new products and tailor them to meet the specific requirements of our customers.

Any Questions?

I hope you have found this document to be helpful. Should you require any assistance or have inquiries, please do not hesitate to contact us.