Criando um Menu Avançado com Bootstrap

Anteriormente nós aprendemos como criar um menu principal para seu site, bem básico, para quem realmente não entende quase nada de programação e está iniciando.

Se você leu o artigo anterior que fala sobre CodeIgniter e Bootstrap, frameworks que mudaram a minha vida como programador, iremos aprender agora como criar um menu principal avançado utilizando essas ferramentas como frameworks.

Utilizaremos alguns conhecimentos do tutorial anterior sobre como criar um menu básico para o seu site, então se você não leu ainda, recomendo que leia antes de prosseguir com esse tutorial.

Como você já sabe, o Bootstrap automaticamente faz com que seu site fique responsivo, utilizando de seus elementos como referencia para posicionamento, tamanho, etc.

Sabendo disso, se a gente for criar um menu utilizando o Bootstrap para front-end, teremos que seguir algumas normas e padrões estabelecidos pelo Bootstrap para fazer com que ele automaticamente estruture os elementos da página para deixar responsivo corretamente.

Primeiramente iremos copiar nosso pacote BootIgniter (um pacote do CodeIgniter e Bootstrap integrados, você pode baixar no artigo Encarando as Frameworks: CodeIgniter e Bootstrap) no nosso diretório, verificamos se ta tudo certo, e começaremos a colocar a mão na massa.

Primeiramente criaremos um novo controlador, nomearemos de “menu.php”, crie esse arquivo na pasta Controllers, e atribua o seguinte conteúdo:

1 2 3 4 5 6 7 8 9 10

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed'); class Menu extends CI_Controller { public function index() { $this->load->view('header'); $this->load->view('menu_principal'); $this->load->view('footer'); } }

Novo controlador criado, agora precisamos alterar a rota do site para chamar ele primeiro ao invés do “welcome”, para isso, iremos no seguinte diretório: “application/config/routes.php” e mudaremos a seguinte linha:

Após alterar a rota do site, precisamos agora criar o arquivo view que o controlador chama, esse arquivo se chamará “menu_principal.php” e vai no diretório “application/view” do seu projeto:

Agora é hora de programar mesmo, mão na massa! Iremos utilizar CSS e HTML nesse mesmo arquivo, portando não é necessário linkar nada nos outros arquivos “footer.php” ou “header.php”.

Como já disse anteriormente, nosso menu tem que seguir um padrão para o bootstrap fazer sua parte, portando, iremos criar um menu utilizando o padrão do bootstrap. Abra o arquivo “menu_principal.php” e escreva:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39

<style type="text/css"> </style> <br/><br/><br/><br/> <nav class="navbar navbar-default" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">MeuSite</a> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home <span class="sr-only">(selecionado)</span></a></li> <li><a href="#">Contato</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Servicos <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="#">Design Grafico</a></li> <li><a href="#">Desenvolvimento Web</a></li> <li><a href="#">Informatica</a></li> <li class="divider"></li> <li><a href="#">Outros servicos</a></li> </ul> </li> <li><a href="#">Fale Conosco</a></li> </ul> </div><!-- /.navbar-collapse --> </div> </nav>

Salve o arquivo em “menu_principal.php”, e perceba que teremos um menu principal, mesmo sem ter feito nada com CSS! Isso por que o Bootstrap tem seu próprio arquivo CSS, que por padrão formata o menu dessa forma.

No final desse artigo você vai descobrir alguns lugares onde você pode customizar esse layout padrão do Bootstrap, mudando cores, fontes e tamanhos. É incrível!

Veja como está ficando nosso menu principal:

Muitos sites feitos com Bootstrap criam menus padrões e deixam com esse visual ai mesmo, o que não é uma má idéia. Mas caso você queira customizar, vamos seguir em frente!

Customizando o menu principal

Como já havíamos criado o espaço para escrever CSS no nosso arquivo “menu_principal.php”, agora iremos utilizar este espaço. Escreva o seguinte código naquele espaço:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40

<style type="text/css"> /* barra de menu principal */ .navbar-default { background: #B3D4E2; border: 1px solid #89B0D0; } /* elemento que tem o nome "MeuSite" */ .navbar-default .navbar-brand { color: #336799; } /* item de menu quando tiver selecionado */ .navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:hover, .navbar-default .navbar-nav>.active>a:focus { color: #5387AD; background-color: #F5F5F5; } /* item de menu */ .navbar-default .navbar-nav>li>a { color: #5387AD; } /* mouse over no item de menu */ .navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:focus { color: #0C2C4C; background-color: transparent; } /* item de menu dropdown quando tiver aberto */ .navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:hover, .navbar-default .navbar-nav>.open>a:focus { color: #5387AD; background-color: #FFFFFF; } </style>

Pronto! Nem parece que criamos um menu tão bem feito como este programando tão pouco, não é? Esse é o lado bom de utilizar frameworks, elas agilizam bastante o processo de criação.

Você pode explorar os códigos que escrevemos hoje, modificando, testando, indo no site do Bootstrap e procurando saber o que as classes fazem, etc.

Veja abaixo como ficou nosso menu principal:

Clicando em Servicos, o submenu aparece!

No código CSS que escrevemos, você pode modificar o tamanho, cores, altura, estilos, etc.

O Bootstrap é uma ótima framework, tem esse layout padrão que é bonito, mas você pode modificá-lo criando um novo arquivo CSS e sobrescrevendo os códigos, ou alterando o arquivo “bootstrap.css”.

Não é lá uma boa idéia, por que o arquivo tem bastante classes e códigos, e você iria demorar horas para alterar o arquivo e deixá-lo a seu gosto.

Existem alguns arquivos já modificados do “bootstrap.css” que tem a sua interface alterada, estes são chamados de temas.

Existe um site que disponibiliza estes temas grátis para você baixar, o site se chama BootSwatch, e no item “Themes” do site você encontra uma lista de temas que podem ser testados no próprio site, e você pode baixar indo no item “Download” e clicando em “bootstrap.min.css”.

Leia Mais

Encarando as Frameworks: Codeigniter e Bootstrap

Quando você cria um site, todo seu conteúdo e imagens, tabelas, botões, formulários, menus, etc. Faz parte do chamado layout.

Layout, também chamado de front-end nada mais é do que o visual do seu site, toda aquela beleza que o usuário vai visualizar.

Antigamente quando não existia ferramentas tão modernas como as de hoje em dia para desenvolver/desenhar o front-end do site, os desenvolvedores o faziam com tabela, criando visuais quadrados e iguais, praticamente.

O que mudava era apenas as cores, por que as tabelas são quadradas, e esse era o limite do desenvolvimento/desenho front-end, não passava de tabelas e imagens montadas umas com as outras para criar o visual final do site.

Como a maioria dos usuários utilizava o Internet Explorer no desktop (computador de casa), eles não tinham que se preocupar com padrões e otimização para outros browsers. O que o usuário criava no IE, não precisava reformular nem melhorar nada para outros browsers, até por que não existiam.

Depois de algum tempo, surgiu o Firefox, que deixou o IE no chinelo. O Firefox tinha uma interface bonita, mais limpa, tinha mais espaço para a tela e não para as barras de favorito, histórico, etc. (como no IE.).

O Firefox tem sua própria engine (motor), isso é, tem seu próprio jeito de interpretar e exibir os comandos HTML e CSS.

Com isso, os desenvolvedores agora tinham algumas preocupações: nem sempre o que era exibido no IE, era exibido exatamente no Firefox, ou vice-versa. Algumas colunas mais para esquerda, outras mais para baixo, etc.

Agora os programadores tinham que lidar com as diferenças de interpretação de cada navegador, criando assim blocos de comandos no HTML e CSS, de modo que fique idêntico em ambos os navegadores.

Depois que o Google Chrome foi lançado, agora eram 3 navegadores principais diferentes para fazer com que o site ficasse igual em todos. A partir daí já não era mais tabelas quadradas e imagens para os sites.

Estávamos quase na ponta do CSS3, já tínhamos muitas tecnologias de programação web. Muitos utilizaram várias artimanhas para fazer com que o que fosse exibido em um, fosse exibido em todos.

É aí que entra as frameworks.

 

Codeigniter é considerado um dos melhores frameworks.

O CodeIgniter mudou a minha vida

A partir de uma época em que era necessário você “formatar” o seu CSS de modo que tudo que você programasse ficasse idêntico em todos os navegadores, foram surgindo os frameworks.

Framework em programação nada mais é do que um conjunto de arquivos HTML,CSS,JS, etc. Que servem de auxílio para nós programadores atribuir um padrão de código, organizar melhor nossos arquivos de programação, e também economizar muitas linhas de código.

Quando eu comecei a programar PHP (há muitos anos atrás) eu não tinha muito conhecimento de frameworks. A maioria dos sites que eu via  eram feitos com tabelas, muitas artimanhas e muitos erros de CSS.

E toda vez que eu ia criar um site novo, era a mesma coisa, pegava o arquivo de configuração no banco de dados e copiava pra pasta do projeto, o arquivo de configuração era responsável por conectar no banco e selecionar o banco correspondente.

E era isso, eu (e mais milhões de pessoas) tinha(mos) muitas brechas de código, fazendo com que se a gente criasse um site importante, ficasse fácil a invasão do mesmo.

E foi pensando em melhorar a segurança, organização de código e agilidade dos códigos que eu procurei aprender sobre frameworks.

De cara eu encontrei o CodeIgniter, foi amor a primeira vista, quando comecei a ler o manual (é, eu sou daqueles que pega a engine, o manual e sai dali sabendo de tudo) eu fiquei impressionado com as funções que ele tinha.

Tinha URL Amigável (eu quebrava a cara pra fazer isso)

Url amigável para quem não sabe, é quando você deixa o endereço atual da página de forma que fique fácil memorizar, que fique amigável para lembrar depois.

seudominioaqui.com/loja.php?cat=canetas&id=10274 - isso aqui não é amigável.

seudominioaqui.com/loja/canetas/caneta-azul-e-verde - isso é uma url bem amigável.

O CodeIgniter por padrão já fazia isso, era uma beleza, meus olhos brilharam quando vi a capacidade dessa framework e o quanto ela iria agilizar meu processo de desenvolvimento.

Ele tinha uma estrutura de arquivos que deixava meu site totalmente bem organizado, a estrutura chamada M.V.C. (Model View Controller).

O conceito MVC faz com que o seu site rode mais rápido, usando o desempenho apenas com o que realmente é necessário.

Na pasta Model, você colocaria os arquivos de modelo que iriam ter funções que retornariam dados vindos do banco de dados. Isso era ótimo, por que você não precisaria ter 1 arquivo, e toda vez que fosse conectar tivesse que carregar tudo daquele arquivo para pegar 1 dado, ou ter que fazer a query no próprio índex.php (o que é uma péssima prática).

Na pasta View, você colocaria os arquivos de front-end (muito mais organizado), arquivos que eram responsáveis apenas por exibir as informações. Ele capturava os dados do Controller, e fazia com que os arquivos se tornassem dinâmicos, exibindo apenas o HTML.

Na pasta Controller, basicamente você guardaria todas as “pastas” do site, em formato PHP (o CodeIgniter automaticamente faz a estrutura dos arquivos de modo que os arquivos PHP na pasta Controller se tornem pastas e se comuniquem com as bibliotecas, e por ai vai.) e é responsável por dizer o que vai aonde.

Por exemplo, no Controller “principal”, tinha uma função “índex”, essa função seria chamada automaticamente caso o usuário acessasse “seusite.com/principal” ou se esse fosse o Controller principal do site (que pode ser atribuído um controlador para ser exibido no diretório raiz).

Dentro da função índex, você iria poder se comunicar com o model, chamando eles e fazendo verificações no banco, ou chamando views para exibir conteúdo no site, passando parâmetros dinâmicos através do Controller, como por exemplo o título da página, poderia fazer com que o arquivo estático de view mudasse o título vindo do Controller.

Entre outras funcionalidades do CodeIgniter, como biblioteca para gerenciar SESSIONS, biblioteca para auxiliar no gerenciamento de GETS e POSTS de modo seguro, biblioteca para auxiliar em upload de imagens e arquivos de modo seguro e bem automatizado (ao mesmo tempo totalmente personalizável), etc.

Eu percebi que o CodeIgniter era a melhor ferramenta para eu programar o back-end do meu site.

Back-end para quem não sabe, é toda a programação que o usuário final não vê. Como as requisições GET e POST, as validações de formulário, comandos de laço, estruturas condicionais, verificações de sessão, e etc.

Mas faltava algo para terminar de completar minha vida, estava faltando uma framework front-end, para casar logo tudo de uma vez.

O Bootstrap foi o tchan

O Bootstrap era o par perfeito, a colméia da abelha, o nariz do palhaço, a luva da mão (ta, já chega.) que eu precisava para poder completar tudo.

O Bootstrap para quem não sabe, é uma biblioteca (conjunto de arquivos) que auxiliava na programação front-end, já formatava automaticamente seu CSS, fazendo com que ficasse responsivo (dava pra visualizar o site no celular de boa), otimizado e compatível com todos os browsers.

O lado ótimo do Bootstrap é que ele é feito pela equipe do Twitter (sim, Twitter), o que dava pra confiar e reconhecer que era uma ferramenta Ó T I M A!

Pensando nisso, resolvi casar os dois e integrei o Bootstrap no CodeIgniter, fiz um pacote, e eu tinha tudo que precisava na minha vida, framework para auxiliar o back-end do site, e outra framework para auxiliar no front-end do site.

 Resolvi disponibilizar esse pacote que criei aqui no blog, clique aqui pra baixar.

Quando for iniciar seu projeto, coloque os arquivos da pasta BootIgniter no diretório criado no htdocs, ou onde preferir.

Dentro estão o arquivo índex.php (você nunca deve mexer aqui), o diretório Application, System e Assets (é aqui q você vai colocar os arquivos terceiros do site, como CSS, JS, XML e imagens, etc.)

Após colocar os arquivos na pasta do FTP ou na pasta do projeto no Htdocs, já pode ir olhar no browser, está pronto-para-usar.

Caso você ainda não conheça o CodeIgniter ou o Bootstrap, seja ousado, abra os arquivos (só não altere os arquivos índex.php na pasta principal nem os arquivos da pasta system), faça como eu fiz: edite, teste, veja o que acontece, olhe no manual, teste de novo.

Abaixo o endereço das duas frameworks para você conhecer mais e acessar o manual delas.

Site do CodeIgniter: www.codeigniter.com/user_guide/

Site do Bootstrap: www.getbootstrap.com/getting-started/

Leia Mais

Guia de como criar um menu básico para o seu site!

Todo website bom que se preze, tem o seu menu principal, que normalmente fica localizado na parte superior, como uma barra horizontal que vai de um lado a outro do site.

Existe também um outro tipo de menu: o menu vertical, a diferença do menu vertical é que este fica em um dos lados do site, apresentando os itens do menu um abaixo do outro, como mostra a imagem ao lado.

Esse menu é responsável por fazer com que haja uma boa navegação entre as páginas do site, prevenindo que o usuário tenha que digitar ou descobrir o endereço daquela página para ter acesso a ela.

Abaixo teremos algumas dicas, e aprenderemos como criar um menu básico utilizando HTML e CSS

Escolhendo referência para o seu menu

Antes de começarmos a criar, precisamos ter em mente o que pretendemos fazer. É um menu arredondado? Vai ter uma barra de fundo? Vai ser largura fixa? Qual fonte ficaria melhor?

Geralmente quando eu vou fazer um novo menu principal, eu procuro algumas referências do que eu poderia criar.

Colocando algumas palavras-chave no buscador de imagem como “menu horizontal” ou “menu vertical”, a gente já pode visualizar alguns exemplos e começar a ter ideia do que faremos.

Pesquisando o termo relativo, você vai encontrar muitas referências.

Após encontrar a referência perfeita para o menu que você pretende criar, é hora de decidir algumas coisas.

É um menu arredondado? Existe um problema de compatibilidade entre os navegadores, alguns interpretam alguns comandos especiais, enquanto outros não. Por isso tome cuidado ao utilizar muitos comandos de CSS que você não conhece. Visualize seu projeto em todos os navegadores que tiver.

Menu arredondado nem sempre fica bom e compativel com todos os navegadores.

Vai ter barra de fundo? Barra de fundo nada mais é do que um “contêiner” decorado, onde todos os itens do menu ficam dentro.

Vai ser largura fixa? Os itens do menu terão largura fixa? Ou serão de largura dinâmica (dependendo da quantidade dos caracteres do item)?

Qual fonte ficaria melhor? Tome cuidado com as fontes que escolhe. Nem todos os browsers e sistemas operacionais as reconhecem, por isso utilize o comando “font-family” quando for escrever seu CSS. Confira aqui uma lista de fontes seguras e veja qual se adequa melhor ao seu novo menu.

Programando menu básico com HTML e CSS

O primeiro passo é organizar os arquivos no diretório FTP ou no seu diretório de servidor local (Xampp, WMServerTools, etc.), como nosso exemplo é apenas HTML e CSS, não necessitamos de servidor.

Primeiramente criaremos um diretório para guardar os arquivos do nosso projeto.

Agora criaremos dois arquivos, um será chamado de “menu.html” e o outro será chamado de “estilo.css”.

Agora prepare-se para colocarmos a mão na massa. Utilizando o seu editor de texto favorito, vamos escrever a estrutura básica – cabeçalho e rodapé - do nosso arquivo “menu.html”:

1 2 3 4 5 6 7 8

<link rel="stylesheet" type="text/css" href="estilo.css"/> <ul class="menu_principal"> <li><a href="menu.html">Home</a></li> <li><a href="#">Downloads</a></li> <li><a href="#">Contato</a></li> <li><a href="#">Sobre Nós</a></li> </ul>

Salve o código acima e execute o arquivo dando um duplo clique sobre ele:

Sim, eu sei que isso não parece nem um pouco com um menu principal, mas o que acabamos de escrever foi a estrutura HTML, essa estrutura é responsável por criar os elementos no browser, nós ainda precisamos estilizar estes elementos para que pareçam um menu, e é aí que entra o CSS!

Na nossa folha de estilos, utilizaremos comandos do CSS1 e CSS2, que é compatível com todos os navegadores modernos. Mão na massa!

1 2 3 4 5 6 7 8 9 10 11

.menu_principal { display:list-item; background: #0BDDFF; } .menu_principal li { float: left; list-style-type: none; }

E vamos ver como está ficando...

Particularmente eu adoro a cor azul claro, você pode colocar a cor que você quiser no parâmetro do comando “background-color”. Mas isso ainda não se parece com um menu, precisamos estilizar mais algumas coisas ainda! Veja só:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

.menu_principal { /* removeremos todas as formatações da classe menu_principal */ } .menu_principal li { float: left; list-style-type: none; } /* decoraremos os links */ .menu_principal li>a { background-color: #49D7FE; display: block; padding: 8px 8px; text-decoration: none; color: #fff; } .menu_principal li>a:hover { background-color: #39C0FF; }

E teremos isso:

Sim, eu sei, não é lá o menu mais sofisticado do mundo, mas com base neste simples modelo, você vai poder criar muitos outros, por que na verdade o que vai mudar muito é o CSS, o HTML será o mesmo. vamos alterar um pouco o CSS.

Primeiramente iremos retirar a propriedade “background-color” do nosso link, modificaremos a nossa UL principal, colocaremos o background nela, e teremos uma barra horizontal, veja!

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

/* adicionaremos o display, padding, background-color e width */ /* na nossa UL principal */ .menu_principal { display: table; padding: 0; background-color: #0BDDFF; width: 100%; } /* e removeremos o background-color daqui */ .menu_principal li>a { display: block; padding: 8px 8px; text-decoration: none; color: #fff; }

Agora é só fazer o que a sua imaginação permitir!

Isso é um menu básico, a partir daí você poderá fazer outros menus, com borda, sem borda, hover, sublinhado, e por aí vai. Na próxima semana você vai aprender como fazer menus avançados com HTML e CSS, que incluem imagens, efeitos modernos, e etc.

Outras maneiras de ter um menu

Caso você ache que não leva jeito pra essas coisas – o que leva tempo, dedicação e paciência pra fazer algo “espetacular” – existem algumas ferramentas online que auxiliam na criação de menus.

 Os menus criados nesses sites ficam com uma cara bem profissional, ideal para quem não tem muita experiência em criar os menus complexos utilizando código, nesses sites, você escolhe o modelo, as cores, e depois salva os arquivos necessários, aí é só incluir o CSS e colocar o HTML do menu no seu site que fica perfeito!

Confira dois sites que são ótimos para ter o seu menu pronto de dar inveja!

·         Menucool

·         CSS Menu Maker

Leia Mais

Aprenda como fazer uma logomarca gratis para o seu site

Hoje em dia, para qualquer tipo de projeto que você vá fazer, terá que existir uma logomarca para representar isso, para quem entende de design gráfico e tem as ferramentas necessárias, é moleza fazer isso tudo.

O problema acontece quando você não tem o conhecimento de ferramentas avançadas (como o Photoshop ou CorelDraw, que são pagos), ou tampouco entende dessa área.

Para sua alegria, existem ferramentas free que dão testa com muitas ferramentas pagas, programas como Gimp, Paint.Net, Inkscape, entre outros, que me fazem pensar que ainda tem gente que sabe que nem todo mundo tem condições de pagar tão caro nessas ferramentas como Photoshop, CorelDraw, Illustrator, etc.

Hoje você vai conhecer as formas gratuitas, fáceis e eficazes de fazer sua identidade visual para o seu projeto de site ou qualquer outra coisa.

OnlineLogoMaker

Crie sua logomarca facilmente com essa ferramenta online e totalmente gratuita!

Esta é uma ferramenta bastante útil, intuitiva e fácil de usar, com o OnlineLogoMaker você pode criar a sua logomarca em menos de 5 minutos, é bem fácil mesmo.

O site está em inglês, mas como você pode ver, todos os itens que você vai usar têm ícones, o que fica fácil entender o que o botão correspondente faz.

Você pode adicionar tanto símbolos que o próprio website oferece, quanto imagens que você mesmo pode subir e usar no projeto, os símbolos oferecidos são totalmente customizáveis.

Além disso, você não vai ter aquela surpresa de passar vários minutos criando sua logomarca tão sonhada, e quando vai salvar o serviço pede forma de pagamento.

Neste serviço você pode salvar sua logomarca a qualquer momento, sem nenhuma propaganda ou restrição. O serviço é totalmente gratuito e vale a pena conferir!

Gimp

Gimp é considerado um dos melhores softwares de edição de imagens gratuitos que tem!

Eu passei muitos anos utilizando o Gimp como principal ferramenta de criação por que quando você é programador, a maioria das ferramentas que você vai utilizar para desenvolver os sites é grátis, então isso acabou me motivando a continuar utilizando recursos gratuitos para a criação dos meus projetos.

Gimp é uma ferramenta profissional aberta para criação de trabalhos gráficos, o Gimp conta com uma comunidade de peso, que visa oferecer traduções, tutoriais, brushes (pincéis), templates para logomarcas, e muito mais.

Assista abaixo um tutorial prático de como criar a sua logomarca utilizando o Gimp:

Inkscape

Inkscape é uma alternativa gratuita para programas como CorelDraw e Adobe Illustrator!

Com o Inkscape você consegue facilmente criar uma imagem vetorizada, isso é, um imagem onde ela é toda recalculada sempre que você aumenta ela de tamanho, isso impede que a imagem perca qualidade, e fique sempre do jeito que você a criou.

Isso é útil caso você crie seu logotipo e já deseja guarda-lo para um futuro cartão de visita, fachada, etc.

Assim como o Gimp, o Inkscape conta com centenas de tutoriais, templates, e tudo mais para que você aproveite o melhor deste software de edição totalmente gratuito e português!

Veja um tutorial rápido abaixo sobre como criar uma logomarca utilizando os recursos do Inkscape:

E você? Conhece alguma maneira gratuita de ter o próprio logotipo para o seu site, projeto ou empresa? Comente abaixo!

Leia Mais