tutorial-upload-logomarca

# 🖼️ Tutorial: Upload de Logomarca ## 📋 Índice 1. [O Que É Upload de Logomarca](#o-que-é-upload-de-logomarca) 2. [Por Que Fazer Upload](#por-que-fazer-upload) 3. [Requisitos da Imagem](#requisitos-da-imagem) 4. [Como Fazer Upload](#como-fazer-upload) 5. [Onde a Logomarca Aparece](#onde-a-logomarca-aparece) 6. [Editar ou Substituir](#editar-ou-substituir) 7. [Troubleshooting](#troubleshooting) 8. [Dicas Importantes](#dicas-importantes) --- ## 🖼️ O Que É Upload de Logomarca ### **Definição** **Upload de Logomarca** é o processo de **enviar e configurar** a logo da sua empresa no sistema EmDias para personalização visual. ### **Características** - ✅ Personaliza o sistema com sua marca - ✅ Aparece em vários lugares do sistema - ✅ Formato PNG recomendado - ✅ Redimensionamento automático - ✅ Suporte a transparência ### **Importância** - Identidade visual da sua empresa - Profissionalismo - Reconhecimento da marca - Personalização completa --- ## 💡 Por Que Fazer Upload ### **1. Identidade Visual** - Sistema com sua marca - Reconhecimento imediato - Profissionalismo ### **2. Personalização** - Sistema único para você - Diferenciação - Experiência personalizada ### **3. Marketing** - Sua marca em todos os lugares - Fortalecimento da marca - Consistência visual ### **4. Confiança** - Clientes veem sua marca - Aumenta confiança - Profissionalismo --- ## 📐 Requisitos da Imagem ### **Formato** - ✅ **PNG**: Recomendado (suporta transparência) - ✅ **GIF**: Aceito - ❌ **JPG/JPEG**: Não recomendado (sem transparência) - ❌ **SVG**: Não suportado ### **Tamanho** - **Recomendado**: 200x200 pixels - **Mínimo**: 100x100 pixels - **Máximo**: 1000x1000 pixels - **Proporção**: Quadrada (1:1) é ideal ### **Qualidade** - **Resolução**: Alta qualidade - **Fundo**: Transparente (PNG) ou branco - **Nitidez**: Imagem nítida e clara - **Cores**: Cores vibrantes e contrastantes ### **Peso do Arquivo** - **Recomendado**: Até 500 KB - **Máximo**: 2 MB - **Otimização**: Comprima antes de enviar --- ## 🚀 Como Fazer Upload ### **Método 1: Pela Página de Configurações** #### **Passo 1: Acessar Configurações** 1. No menu, clique em **"Configurações"** 2. Você será direcionado para a página de configurações 3. Procure a aba **"Geral"** ou **"Personalização"** #### **Passo 2: Localizar Campo de Logomarca** 1. Na página de configurações, encontre a seção **"Logomarca"** 2. Você verá: - Imagem atual (se já tiver uma) - Campo para upload - Instruções #### **Passo 3: Escolher Arquivo** 1. Clique em **"Escolher Arquivo"** ou **"Selecionar Imagem"** 2. Navegue até a pasta onde está sua logomarca 3. Selecione o arquivo (PNG recomendado) 4. Clique em **"Abrir"** #### **Passo 4: Visualizar Preview** 1. Após selecionar, você verá um preview da imagem 2. Verifique se está correta 3. Se não estiver, escolha outro arquivo #### **Passo 5: Salvar** 1. Clique em **"Salvar"** ou **"Upload"** 2. Aguarde o processamento 3. Sistema redimensionará automaticamente 4. Você verá confirmação de sucesso --- ### **Método 2: Pela Edição de Licença** #### **Passo 1: Acessar Edição** 1. Acesse **"Configurações"** → **"Dados da Empresa"** 2. Ou acesse diretamente a edição da licença 3. Procure o campo de logomarca #### **Passo 2: Fazer Upload** 1. Siga os mesmos passos do Método 1 2. Faça upload da logomarca 3. Salve as alterações --- ## 📍 Onde a Logomarca Aparece ### **1. Dashboard** - Canto superior esquerdo - Header do sistema - Identificação visual ### **2. Relatórios** - Cabeçalho dos relatórios - PDFs exportados - Documentos impressos ### **3. Mensagens WhatsApp** - Banners personalizados - Mensagens de cobrança - Comunicação com clientes ### **4. Recibos e Comprovantes** - Cabeçalho de recibos - Comprovantes de pagamento - Documentos oficiais ### **5. E-mails** - Assinatura de e-mails - Templates de comunicação - Notificações --- ## ✏️ Editar ou Substituir ### **Como Substituir Logomarca** #### **Passo 1: Acessar Configurações** 1. Vá em **"Configurações"** → **"Personalização"** 2. Veja a logomarca atual #### **Passo 2: Fazer Novo Upload** 1. Clique em **"Escolher Arquivo"** 2. Selecione a nova imagem 3. Clique em **"Salvar"** #### **Passo 3: Confirmação** - ✅ Nova logomarca substituirá a antiga - ✅ Sistema atualizará automaticamente - ✅ Aparecerá em todos os lugares --- ## 🔧 Troubleshooting ### **Problemas Comuns** #### **1. Imagem Não Carrega** **Causa:** Arquivo muito grande ou formato incorreto **Solução:** - ✅ Reduza o tamanho da imagem - ✅ Converta para PNG - ✅ Comprima o arquivo - ✅ Verifique se está dentro do limite (2 MB) --- #### **2. Imagem Fica Distorcida** **Causa:** Proporção incorreta **Solução:** - ✅ Use imagem quadrada (1:1) - ✅ Redimensione para 200x200 pixels - ✅ Mantenha proporção original --- #### **3. Fundo Branco Aparece** **Causa:** Imagem sem transparência **Solução:** - ✅ Use formato PNG com transparência - ✅ Remova fundo antes de fazer upload - ✅ Use editor de imagens para criar transparência --- #### **4. Imagem Fica Pixelada** **Causa:** Resolução muito baixa **Solução:** - ✅ Use imagem de alta resolução - ✅ Mínimo 200x200 pixels - ✅ Evite ampliar imagens pequenas --- #### **5. Upload Falha** **Causa:** Problemas técnicos **Solução:** - ✅ Verifique conexão com internet - ✅ Tente outro navegador - ✅ Limpe cache do navegador - ✅ Entre em contato com suporte --- ## 💡 Dicas Importantes ### **1. Prepare a Imagem Antes** - ✅ Redimensione para 200x200 pixels - ✅ Remova fundo (use transparência) - ✅ Otimize o arquivo (comprima) - ✅ Teste em diferentes tamanhos ### **2. Use Formato PNG** - ✅ Melhor qualidade - ✅ Suporta transparência - ✅ Ideal para logos ### **3. Mantenha Proporção** - ✅ Use imagem quadrada - ✅ Evite distorções - ✅ Centralize o logo ### **4. Teste Após Upload** - ✅ Verifique em diferentes telas - ✅ Veja como aparece nos relatórios - ✅ Teste em mensagens WhatsApp - ✅ Ajuste se necessário ### **5. Mantenha Backup** - ✅ Salve a imagem original - ✅ Mantenha versões diferentes - ✅ Tenha backup caso precise substituir --- ## 🎨 Dicas de Design ### **1. Cores** - ✅ Use cores contrastantes - ✅ Evite cores muito claras - ✅ Considere fundo escuro/claro ### **2. Tamanho do Logo** - ✅ Não muito grande (ocupa espaço) - ✅ Não muito pequeno (não aparece) - ✅ Tamanho médio é ideal ### **3. Simplicidade** - ✅ Logo simples funciona melhor - ✅ Evite muitos detalhes - ✅ Foque no essencial ### **4. Legibilidade** - ✅ Texto legível (se houver) - ✅ Ícones claros - ✅ Fácil identificação --- ## ❓ Dúvidas Frequentes **P: Posso usar qualquer formato de imagem?** R: Recomendado PNG ou GIF. JPG não suporta transparência. **P: Qual o tamanho ideal?** R: 200x200 pixels é o ideal, mas aceita de 100x100 até 1000x1000. **P: A logomarca é redimensionada automaticamente?** R: Sim, o sistema redimensiona para 200x200 pixels automaticamente. **P: Posso ter logomarca diferente em diferentes lugares?** R: Não, a mesma logomarca aparece em todos os lugares do sistema. **P: O que acontece se eu não fizer upload?** R: O sistema usará a logomarca padrão do EmDias. **P: Posso remover a logomarca depois?** R: Sim, você pode substituir ou remover, voltando para a padrão. --- ## ✅ Checklist de Upload - [ ] Preparar imagem (PNG, 200x200, transparente) - [ ] Otimizar arquivo (comprimir se necessário) - [ ] Acessar configurações - [ ] Fazer upload - [ ] Verificar preview - [ ] Salvar alterações - [ ] Testar em diferentes lugares - [ ] Ajustar se necessário --- **Última atualização**: Dezembro 2025 **Versão do Sistema**: 0.0.1