MANUAL PARA LA CREACIÓN DE LOGOTIPOS

CREACIÓN DE LOGOTIPOS vectoriales online gratis y sin registros

foto animaciones web

¡hola a todos!

Bien venido a animaciones web. Online  sin duda, la mejor pagina web para poder crear logotipos vectoriales  animable  online y gratuitamente,

Voy a deciros a grandes rasgo como se maneja la web,  para que podáis descargar vuestro logotipo en formato png   , o en formato vectorial y si lo deseáis  exportable a adobe illustrator donde os ahorrareis cientos de horas  de edición,

Añadiremos  los tipos de letra usados para que vuestro logo lo podáis entregar a cualquier tipo de impresor , fácil y gratuitamente

YA dentro de nuestro  creador de logos y animaciones web podremos ver un menú  horizontal   donde se puede añadir objetos a nuestro escenario svg , colorear, mover, borrar partes crear animaciones y descargar el logotipo

menu creador de logos

Poco a poco os iré diciendo las propiedades más importantes, os invito a echarle un vistazo más detenidamente

GUIAS

reticulas

CUADRICULAS

Para empezar vamos  a crear  unas plantillas que nos sirva de base para centrar nuestro logotipo y obtener unas  proporciones  a todos los objetos

En el botón añadir,  plantillas,  Empezarnos poniendo una cuadricula que dividirá nuestro escenario en las  divisiones que le indiquemos,  para formar como un papel cuadriculado que nos sirvan de guía

LINEAS HORIZONTALES Y VERTICALES

En el misma parte de creación de guías,  colocaremos una línea horizontal y otra vertical que dividirá nuestro escenario,.

esto nos servirá para centrar los objetos y que todo los elementos del logotipo queden alineados y  con los mismos pesos,

Estas guías se pueden mover y crear cuantas necesitemos y las podremos borrar cuando no las necesitemos

CIRCULO EN UN LOGOTIPO

Creamos  un círculo como parte de nuestro logotipo 

Este círculo es un contorno que luego le daremos color,

 como veis  se queda centrado a la pantalla de vuestro dispositivo muy fácil con solo darle l botón “enviar circulo”

4 CREAR UN LOGOTIPO EN FORMA DE POLIGONO

De la misma forma que hemos creado el circulo, vamos a colocar un contorno en forma de polígono,

 En este caso crearemos un  octógono con solo modifica el campo de los parámetros de nuestras guiais, colocando el numero de lados que deseamos  y enviarlo a nuestro escenario,

 Luego le daremos animaciones  para que gire sobre su propio eje

SELECCIÓN DE ELEMENTOS

Todos los elementos que vallamos introduciendo en nuestro escenario se podrán trasformar  individualmente.  Para ello  deben estar seleccionarlos,

Hay dos tipos de selección:

. Una clicando directamente sobre el objeto a transformar y otra , en dando  clic en la línea de cualidades del objeto.

En esta línea  de propiedades nos encontraremos información del elemento insertado, como el nombre, el número de capa para organizar los objetos unió encima de otro, el estado de visibilidad y  el botón de eliminar y más propiedades que  modificaran la animación.

propiedades

INSERTAR FIGURAS VECTORIALES

En nuestro escenario de creación de logotipos  podemos insertar muchísimas figuras vectoriales,

Vamos al menú añadir  gráficos vectoriales, allí se nos abrirá un menú con cientos de figuras en formato svg organizadas por familias, solo debemos dale clic al dibujo que deseemos insertar para que este se incluya a  nuestro escenario como un objeto mas

TRASNSFORMAR OBJETOS

Todos los objetos, con solo seleccionarlos podemos hacer distintas  transformaciones, como son moverlos, escalarlos girarlos  etc,

 Para ello, nos  podemos ayudar de la estrella de movimiento,  o de un menú que sale de la derecha de nuestro pantalla, donde podemos elegir muchas más transformaciones, también dichas trasformaciones las podemos encontrar en el menú mover  

ELIMINAR PARTE DEL DIBUJO

En dibujos que están formados por varias partes, podemos borrar dichos elementos con solo darle al menú borrar por clic ,.

Con esta propiedad, unida a que ponemos insertar cuantas figuras queramos, y con la propiedad copiar y pegar, podemos hacer figuras tremendamente complejas con la unión de figuras simples.

SELECCIONAR PARTES MAS PEQUEÑAS DE LOS OBJETOS

Otras forman que nos podemos encontrar  las figuras vectoriales, son agrupaciones de muchos elementos en uno solo,  en algunas familias de vectores los gráficos svg se encuentran  agrupados,

 Podemos hacerle zoom para verlos en otra pantalla ,.

Procedemos igual que si fuera un objeto normal dando clic a la figura, para se unan  todas a nuestro escenario,

Podemos realizar transformaciones a  la figura que deseamos o a   partes mas pequeñas  de una de ellas con dos pasos a seguir,

El primero es:

 Seleccionando con un clic el objeto a crear una transformación  y  luego en el menú  de la derecha que se despliega acercando el ratón,  seleccionar el nombre del  vector que deseamos seleccionar,

Con ello el objeto se queda aislado y podremos realizar trasformaciones a partes más pequeñas  de los objetos

menu svg

COPIAR PEGAR

Dentro de una de las trasformaciones que podemos realizar con los objetos, es copiar y pegarlo,

Esto se realiza con el nombre del vector seleccionado en el  menú de la derecha dándole a copiar y pegar,  se nos pide poner un nombre, y en ese momento la parte pegada formara parte de nuestro escenario como un objeto individual más,

si deseamos podemos eliminar todos los objetos agrupados, 

Es deseable que copiar y pegar solo se realice antes de realizar  ningún tipo de transformación previa al objeto, pues podría pasar que el objeto copiado se quedase en una zona fuera de nuestro escenario y no poderse manipular

INSERTAR TEXTO A LOGOTIPOS

letras 1

Ha llegado la hora de insertar textos a nuestro logotipo,

 Animacionesweb.online tiene un gran potencial al tener en su base de datos cerca de 50000 fuentes instalada en su servidor

Si  50000 tipos de letras que  podrás descargar  para crear tu logotipo,

si tu logo va a ser utilizado   en medios profesionales, deberás infórmate si el tipo de letra cuenta con algún tipo de copyright .

Desde nuestra página principal de creador de logos ,Vamos al botón añadir  texto,

Esto no llevara a una página  donde escribiremos el texto que deseemos que aparezca e nuestro escenario,

Por defecto nos aparecen solo 30 fuentes o tipos de letra, pero si modificamos  el selector de número de fuentes podremos visualizar más de miles de tipos de letras

 Hay que tener cuidado con la memoria del ordenador pues puede llegar a tardar mucho en renderizar las fuentes  si elegimos un número muy alto de ellas

 También podremos elegir  el tipo de letras para nuestro logo por la primera inicial del su nombre

y como no ,también seleccionar la fuente tipográfica  si conocemos directamente su nombre

Cuando tengamos elegido  el tipo de letra  y veamos lo que deseamos  insertar en nuestro logo, podemos darle al botón insertar texto para que se quede en nuestro escenario como un objeto mas

Podrás añadir cuantos textos desees sin ningún tipo de problema

 También podrás descargar individualmente el tipo de fuente,  aunque después siempre se añadirán en tu proyecto las fuentes usadas, ¿anímate a usarlas?

INSERTAR FOTOGRAFIAS Y VIDEOS

En el escenario también podemos insertar  imágenes y  videos para crear slider animados,  para crear espectaculares  animaciones web  en vuestras páginas web,

En la página  principal del  la web tenéis ejemplo de ello, pero eso lo trataremos en otros videos, os animo a que os suscribáis a mi canal

DAR COLOR A GRÁFICOS  SVG

Dar color  a nuestros gráficos vectoriales  es una de las facetas más fáciles que podemos generar en nuestra página.

Vamos al menú colorear, y dar color a vectores

Allí solo tendremos  que pinchar en el color que deseemos y luego dar clic a la zona que deseamos colorear

Con ello podemos rellenar nuestro logotipo vectorial con los colores corporativos que deseemos

contornos

CREAR CONTORNOS A GRAFICOS SVG

Otra cualidad que podemos realizar, es crear contornos a nuestros vectores,  

Lo haremos así

Elegimos el color  y pichamos en el objeto a crear el contorno.

Tenemos más propiedades que modifican el contorno como son:

 el ancho del trazo y propiedades para realizar líneas discontinuar a el contornos

, Lo divertido es poder i r probado cada una de ellas y ver el impacto en el grafico.

CREAR DEGRADOS ONLINE

Una de las facetas más espectaculares que podemos realizar a nuestros vectores en rellenarlos con colores degradados

Lo primero que debemos hace  es elegir el primer color y darle al  botón “primer color” y luego elegir el segundo

Podremos  elegir muchos parámetros interesantes para realizar nuestro degradado, de  los más importantes es elegir si lo quieres el degradado lineal o radial

Solo nos queda crear el degradado dando le al botón y se añadirá el degradado a nuestra paleta de colores,  y solo deberemos seleccionara y dale clic al objeto a crear

Muestra pagina web se basa en base de datos guardados en nuestro servidor  por lo que si actualizas la pagina se regeneraran  nuestro dibujo sin problemas

mas informacion de graficos svg en nuestro blog de gráficos svg

degradado

ELIMIAR OBJETOS

A la hora de quitar elementos  sobrantes,  es tan fácil como ir a las propiedades el elemento y en darle al botón eliminar,

Esto  suprimirá  todo el elemento del logotipo, os recuerdo que se podía  eliminar trozos más pequeños  desde el menú horizontal con un solo clic.

DESCARGAR LOGOTIPOS EN PNG

Cuando deseemos podemos descargar el logotipo en formato png  , eso quiere decir que lo descargamos en un formato fotográfico basado en pixeles y que acepta trasparencias, este formato es ideal para todo tipo de aplicaciones, si bien cuando se amplía extremadamente pierde calidad al tratarse de mapa de pixeles  en su composición

DESCARGA LOGOTIPO VECTORIAL

El logotipo también se puede descargar en formato svg , que es un formato de dibujo vectorial .

Este tipo de formato tiene unas cualidades muy importantes para el diseño y la programación web, os diré algunos de ellos,

1     Es un formato que se puede abrir y editar en un editor de textos,

2     Con solo arrastrar el archivo al explorador podemos ver nuestro logotipo

  • Podemos copiarlo y pagarlo  el código directamente en nuestra página web para crear increíbles animaciones web fácilmente
  • y no pierde resolución al ser ampliado, esto es fabuloso si tu logo Va a ser impreso en dimensiones muy grandes como un cartel o lona.

Si vamos al selector descargar svg  veremos cómo se descarga un archivo comprimido en formato zip , donde  veremos  el archivo de las fuentes usadas en nuestro logotipo, y el archivo svg

El archivo de formato svg se puede abrir con programas profesionales como adobe illustrator y terminar de editarlo si es necesario ¡increible!!

 En adobe illustrator hay que tener previamente instaladas  en tu ordenador   el tipo de fuente usado, que te proporcionamos gratuitamente, para que le logotipo se vea tal y como le hemos creado en nuestra página web  online

ANIMACIONES WEB DE FIGURAS VECTORIALES

Tenemos varios métodos de creación de animaciones a los objeto de nuestro logotipo.

 os are un breve resumen de cada uno de ellos , en siguientes videos realizaremos animaciones web mucho más complejas, no te pierdas los videos

1Animaciones “nativas” :

Si  deseamos generar animaciones simples esta es la mejor opción

Vamos  a animaciones svg ,se nos abrirá un apartado donde seleccionando el objeto desde sus propiedades y con el objeto seccionado podemos  ejecutar rotaciones traslaciones escalas  y distorsione muy  sencillamente con solo modificar los datos  front y to y el tiempo de la animación así de sencillo crearemos animaciones  aun grafico svg

animaciones nativas svg

2 animaciones keyframes

keyframe

Con este tipo de animación se puede generar animaciones tremendamente complejas

La animación es dividida en 10 estados que le llamamos keyframe o puntos de transformación

 la formada de actuar es la síguete

  1. Selecciona el objeto a realizar la animación
  2. marca el keyframe  de inicio
  3. transforma el objeto
  4. dale al botón gravar  posición actual
  5. repite el proceso con los keyframes que desees
  6. modifica le tiempo de la animación desde las propiedades del elemento que ha sido animado

,

ANIMACIONES CSS

Igual que realizar puntos de transformación en cada keyframe podemos añadir propiedades css

Con esto conseguiremos transformaciones  de color, trasparencia , contorno etc cualquier paramento  css modificable  en una animación

animaciones css

DESCARGAR ANIMACIONES SVG

descarga animacion

Por último solo nos queda descargar la  animación desde su botón del menú, con ello se nos abrirá una carpeta comprimida y dentro tendrá el archivo svg  donde obtendrás la CREACIÓN DE LOGOTIPOS, solo arrástrala al explorador para tener un archivo independiente con la animación de tu logotipo,

 podrás insertar dicha animación en  cualquier pagina web,

Os animo a seguir  mis  videos  un saludo

CREACIÓN DE LOGOTIPOS
 

Deja una respuesta

Tu dirección de correo electrónico no será publicada.