To Design Reports in Google Data Studio
- Go to “Theme and Layout” in the toolbar.
- Choose a theme.
- Themes can be customized as needed.
- After selecting a theme, click on the “Customize” button to edit it.
- Customize the elements, including fonts, colors, and component styles.
- You can modify primary styles, accent styles, textbox styles, data styles, component grid style, and more.
Extract Themes from Images:
- Go to “Theme and Layout” > “Extract theme from an image“.
- Upload an image.
- Data Studio will automatically generate three theme variants from the image’s colors.
- Choose your favourite variant and apply it.
- The extracted theme will be available as “Custom (extracted from image)“
Hello, everyone. Welcome to another tutorial of the Google Data Studio series, here we are learning Google Data Studio from scratch to mastery. In this article, we will learn how to design reports in Google Data Studio, we have learned so many things so far in this series, and now it’s time to design reports. So, today we will learn how to compile charts on the canvas and make them look like a report, a physically appealing report. We will check out themes, and layout and I will also tell you a trick to make your custom theme. So, without further delay let’s get into it.
Why Designing Report is Important in Google Data Studio?
As we have learned so many technical things about Google Data studio charts, we have seen filters, controls, metrics, dimensions, drill down, optional metrics, custom fields, calculated fields, regular expressions, case statements, conditional formatting, data blending, customization of tables, and so on.
But we have only learned how to create charts and set up them. We have also seen the design aspect of individual charts. But we have not yet learned how to design reports, shareable reports that have everything to look attractive and branded. So, this tutorial is a dedicated guide on how to design reports in Google Data Studio.
How to Design Reports in Google Data Studio?
We will learn about themes, although we have so many things in designing overall reports such as how to setup mobile friendly layouts, how to set up different sized pages, how to create custom theme colors, how to add logos, header, footer, and everything to your reports like a pro. We will focus on themes available themes, how to customize themes, and creating custom themes.
Design Reports in Google Data Studio – Built-in Themes/Templates
In this section, we will learn how to design reports in Google Data Studio using built-in themes. We have so many available themes in Google Data Studio, that can be selected and applied directly to the report, and we can also control it by customizing a theme from scratch. So, for this example I have some charts on my canvas, we will see which themes are available and how they look.
Step 1
Sample data
Step 2
Go to Theme and Layout in the toolbar
Step 3
Here you have so many themes to apply to your data
Step 4
Here are all the themes at a glance
1-Custom
2-Constellation
3-Groovy
4-Insight
5-Ocean
6-Harvest
7-Eucalyptus
8-Pop
9-Fog
10-Lagoon
11-Executive
12-Woodsy
13-Royalty
14-Sienna
15-Material
16-Muted
17-Simple
18-Simple Dark
So, these are some beautiful themes in Google Data Studio, but this is not the end, we can customize any of them to accurately make it a customized variant of any brand.
Design Reports in Google Data Studio – Themes/Templates Customization
In this section, we will learn how to design reports in Google Data Studio using theme customization, we will pick any built-in theme and will customize that as per our preferences of colors, fonts, and so many of these options.
To customize a theme, simply follow the below steps
Step 1
Select the theme you want to customize.
Step 2
Click on the “Customize” button for the selected theme
Step 3
You have a large panel for customization named ”Edit theme”
Step 4
Primary Styles
Here you can set the primary styles of your reports
Report background (you can select a color, or a gradient to set your overall report background)
Primary font color (here you can select the primary font color for your report)
Theme font (here you can select a font family)
Component background and border
Here you can customize the background and border for the components such as charts, buttons, dropdowns, and anything that exists in your report.
Background (select a color for the background of the components)
Border Radius (here you can specify the border radius for the overall report)
Opacity (here you can control the opacity of the overall report)
Border Color (set the border color)
Border weight (here you can set the weightage of the border in numbers)
Border Style (pick a border style such as solid, dashed, dotted, or double)
Border shadow
Here you can select an option for the border shadow, the options are Default, Yes, and No
Step 5
Accent Styles
Secondary font color (for chart headers)
Component background (chart header background color)
Theme accent font (font family for chart headers)
Step 6
Textbox Styles
Text component fill color (fill color for the text components of charts)
Text component font color (font color for the text components of charts)
Text component font (font family for the text components of charts)
Link text color (font color for the links in the charts)
Visited link text color (font color for the links that have been visited)
Hide border checkbox (show or hide border for textboxes)
Step 7
Data Styles
Chart palette
Here you can select a color palette for the charts
Chart styling default
here you can use a default styling from “Series order” or “Dimension values”
Text contrast can be none, low, medium, or high
Step 8
Component Grid Style
Grid color (select a grid color for the grids inside charts)
Positive change color (select a color that will show the positive change)
Negative change color (select a color that will show the negative change)
Chart header
Show on hover drop down, you can select “Show on hover”, “Do not show”, and “Always show”
for table header
Chart header color
Step 9
Page navigation style
Navigation Selection font color
Navigation font color
Navigation font family
Navigation background color
So, these are all the components and elements you can customize to build a custom theme. You go back and your theme will be selected as Custom.
I hope you have understood all the elements that are used to customize a theme from scratch. You can customize any theme, and based on the chart types on your canvas, the customization features can slightly vary.
How to Extract Theme/Template from Image
In this section, we will learn how to design reports in Google Data Studio, and specifically how to extract themes from images, you may have seen so many themes online, and some of them are extremely attractive, you may like some website theme, or some application theme, no problem you can copy it and extract a similar theme from it to use in your Data Studio reports, is not it exciting? Yes, it is, Let’s learn how to extract a theme from the image.
Step 1
Get the image from which you want to extract a theme
Step 2
Go to Theme and layout > scroll down > click on Extract theme from an image
Step 3
Select Upload from the computer, from “by URL” or “Upload from computer”
Step 4
Select the image from the directory
Step 5
Data Studio will automatically detect the image colors and will generate 3 variants of themes from image colors
Step 6
Click on your favorite variant
Step 7
Now Click on Apply to activate this theme
Step 8
The theme is applied to your data
Step 9
You can find this theme in the themes section with the name “Custom (extracted from image)”
This is how you can extract a theme from the image, this method will also work accurately if you use “By URL” options to select your image.
I hope you find this tutorial helpful and that you have learned so many things about how to design reports in Google Data Studio.
Important Notes
- Unfortunately, you cannot rename your custom themes or the themes that are extracted from images
- Different charts may have a different effect on themes based on their components, elements, and the type of data they have
- There is a layout button next to themes, we will explore it in the coming article soon.
Frequently Asked Questions
How do add logos and header, and footer to Data Studio reports?
We can add headers, footers, sidebars, images, logos, buttons, banners, and countless elements in our Data Studio reports, this article is meant to teach about themes, themes customization, and extracting themes from the image, we will surely cover so many other things that are used to design reports in coming articles in this series of Google Data Studio.
What Are the Steps to Export Google Data Studio Reports?
To begin exporting google data studio reports, navigate to the report you wish to export. Click on the File tab in the top left corner, then select Download from the dropdown menu. Choose your preferred file format, such as PDF or CSV. Finally, click Download to export the Google Data Studio report.
Can You Use Google Data Studio Templates for Social Media Reports?
Google Data Studio templates can be effectively utilized for creating visually impressive and informative social media reports. These templates offer a wide range of customizable options, enabling users to present essential metrics and analyze the performance of their social media campaigns. By utilizing Google Data Studio templates, users can streamline their reporting process, save time, and gain valuable insights into the success of their social media strategies.
How to access my previously customized themes in Google Data Studio?
Click on theme and layout go to themes and scroll down, here you have all the themes built-in, and customized, customized themes have a name custom with the theme name, and the themes that are extracted from the image have names like Custom and then a sentence (extracted from image), you can always find your customized and extracted themes here in the theme section inside theme and layout.
Conclusion
Wrapping up how to design reports in Google Data Studio. We learned about themes in Data Studio, we saw all the available built-in themes with their names, and then we customized a theme and see the editing panel from scratch to end. I hope you found all the editing options and that you have understood their usage. Then we saw another exciting feature of Data Studio which is “extract theme from image”, we can use any image here to extract a theme from it by uploading it to Data Studio’s automatic theme generator, and then we can simply apply the generated theme. It can also be used later on different data.
So, that’s all from today’s tutorial. I hope you find this article full of learning. I will see you soon with another helpful tutorial. Keep learning with Office Demy.