Os ícones desenhados para toolbar devem manter o formato de largura 28 pixels e altura 27 pixels para garantir uma aparência uniforme e organizada na barra de ferramentas. Além disso, é importante salvá-los em formato PNG para manter a qualidade da imagem e sem perda de dados.
Os botões possuem dois estados, habilitado e desabilitado, que devem ser identificados visualmente por meio de paletas de cores diferentes. As cores adequadas para cada estado estarão disponíveis abaixo.
| Informações |
|---|
Obs.: Não deverá ser utilizada cor, ou variação de cor, diferente das apresentadas a seguir. |
| Section |
|---|
| Column |
|---|
| | Estado |
|---|
| colour | Green |
|---|
| title | HABILITADO |
|---|
|
| HTML |
|---|
<html>
<head>
<style>
.box {
width: 70px;
height: 70px;
background-color: #F2F0CE;
display: inline-block;
margin-right: 10px;
}
.blue{
background-color: #164659;
}
.boxen {
width: 70px;
height: 70px;
background-color: #F2F0CE;
margin-right: 10px;
display: inline-block;
}
.label {
display: inline-block;
vertical-align: top;
}
</style>
</head>
<body>
<div class="box blue"></div>
<div class="label"><b>Cor de Fundo<br>RGB:</b> 22 70 89<br><b>HEX:</b> #164659</div>
<br>
<br>
<div class="boxen"></div>
<div class="label"><b>Cor do Ícone<br>RGB:</b> 153 152 130<br><b>HEX:</b> #f2f0ce<#F2F0CE</div>
</body>
</html> |
|
| Column |
|---|
| | Estado |
|---|
| colour | Red |
|---|
| title | DESABILITADO |
|---|
|
| HTML |
|---|
<html>
<head>
<style>
.box {
width: 70px;
height: 70px;
display: inline-block;
background-color: #000000;
margin-right: 10px;
}
.blue {
background-color: #164659;
}
.disable {
background-color: #999882;
}
.label {
display: inline-block;
vertical-align: top;
}
</style>
</head>
<body>
<div class="box blue"></div>
<div class="label"><b>Cor de Fundo<br>RGB:</b> 22 70 89<br><b>HEX:</b> #164659</div>
<br>
<br>
<div class="box disable"></div>
<div class="label"><b>Cor do Ícone<br>RGB:</b> 153 152 130<br><b>HEX:</b> #999882</div>
</body>
</html>
|
|
|
| Aviso |
|---|
Os ícones de toolbar deverão ser salvos em:.../progress/src/image/2023/toolbar |
Para criar novos ícones utilize um editor de imagens capaz de manipular vetores, como o InkScape, e siga os seguintes passos:
- Criar um novo arquivo com 28 pixels de largura e 27 pixels de altura.
- Adicionar o fundo com a cor da toolbar (Código HEXADECIMAL: #164659).
Image Added
- Desenhar o ícone, respeitando as seguintes medidas: 17,5 pixels de altura, 17,5 pixels de largura e 3,5 pixels de espessura, as bordas deverão estar arredondadas, utilizando a inclinação entre 35~40º.
Image Added - Após finalizar o desenho, é importante verificar se o ícone está alinhado corretamente ao centro e em proporção adequada com as dimensões da imagem.
- Exportar o arquivo como PNG, para manter a qualidade da imagem e sem perda de dados.
