CREACIÓN DE LOGOTIPOS vectoriales online gratis y sin registros
¡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
Poco a poco os iré diciendo las propiedades más importantes, os invito a echarle un vistazo más detenidamente
GUIAS
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.
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
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
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
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
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
2 animaciones keyframes
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
- Selecciona el objeto a realizar la animación
- marca el keyframe de inicio
- transforma el objeto
- dale al botón gravar posición actual
- repite el proceso con los keyframes que desees
- 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
DESCARGAR ANIMACIONES SVG
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
