Curso de animaciones web y logotipos online
Hola a continuación voy a hacer la presentación del video tutorial de creación de logotipos y animaciones web con gráficos svg
.Este video tutorial de animaciones web y logotipos vectoriales está dirigido a todos los que quieren aprender maneras diferentes de trabajar logotipos y para las que no quien aprender complicados programas para hacer un solo logotipo, aquí os pongo unos ejemplos que he realizado desde mi pagina web que os dejo en la descripción
El objetivo de estos videos tutoriales, es que todos y cada uno de vosotros sea capaz de crear un logotipo vectorial online, subirlo a una página web y crear animaciones con el gráfico vectorial, añadiendo texto , imágenes, vídeos incluso código JavaScript.
Os enseñare a crear impresionantes animaciones para la web, que se podrán utilizar en todo tipo de logotipos, banners, botones y muchas cosas más.
Aquí podréis ver varios ejemplos de las animaciones que podréis realizar a lo largo de los videos.
Espero que valoren el gran potencial que tiene mi software online donde se puede realizar verdaderas locuras de animación .
Entre muchos temas que tratare de explicarte a lo largo de los videos será.
Que es un grafico svg y como descargarlo gratis para realizar nuestros primeros logotipos
Añadir varios gráficos vectoriales para crear un único logotipo, donde le añadiremos texto colores y degradados.
Crearemos animaciones de nuestro logos .
Podréis crear banner con imágenes y videos y animarlos
Puedes entrar a mi blog y echa un vistazo a las animaciones y a los códigos que se generan dinámicamente.
No tendrás que aprender nada de código, solo copiar y pegar en tu página web
la intención es crear un video cada semana si hay suficientes subscriptores que lo deseen , expondremos en el blog los mejores trabajos , con vuestras direcciones por si deseáis que vean tus trabajos realizados en mi pagina web
Espero que les guste si es así dale un like y subscríbete
Que es un grafico svg
A continuación vamos hablar de los gráficos svg
Lo primero Que es un gráfico svg.
- SVG es un formato de gráficos vectoriales bidimensionales,
- Los gráficos pueden ser tanto estáticos como animados,
- Dentro del código svg podremos colocar, figuras simples vectoriales, imágenes, videos, propiedades css y código javascript en formato de lenguaje de marcado XML.
- Son dibujos escalables, no pierden definición al no ser pixeles
- Modificables en un editor de texto
- Con gran potencial para generar gráficos online y modificación por programación
Por todo esto conocer que es un grafico svg debería ser asignatura obligatoria en diseño gráfico.
Pero una de las virtudes que yo veo a este tipo de formato es que el gráfico esta generado por texto y si el formato es correcto es interpretado por los exploradores y por los programas gráficos,
Pongamos un ejemplo
Aquí tenéis un grafico svg en un explorador.
Este grafico esta generado a partir de un texto y guardado con la extensión “.svg “ .
Vamos a ver el archivo el texto
<svg class="img-responsive" version="1.1" id="Capa_1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px" preserveAspectRatio="none" viewBox="0 0 1470 800 ">
<g id="todo" style="transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1)"
class="a">
<g id="b1270">
<g id="toro osb1611260954" class="a1270" style="transform:matrix3d
(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1)">
<path d="m36.1624,731.753c-6.9775-16.5937 21.7169-28.7174 32.8571-42.8571 7.9623
-10.1061 17.2589-19.2224 24.2857-30 10.2358-15.6996 16.7772-33.5265 25.7143-50
9.5559-27.3902 11.9672-49.3606 34.2857-60-14.1025-29.2538 2.566-61.0557 5.7143-
91.4286-7.0256-31.6946-6.025-60.2585 12.8572-88.5714-4.457-13.4215-35.412-
16.9344-30-30 3.6446-8.7988 22.6498,7.4591 28.5714,0-49.2364-29.3826-57.8598-
92.1737-24.2857-104.2857-16.8153,56.3196 12.9463,60.8333 37.1429,74.2857 8.2849-
1.7373 17.0329-22.9027 77.1428-7.1429 18.083,1.6474 25.2268-13.846 58.5714,10
22.8283-13.8571 58.4563,14.6469 52.8571-74.2857 53.4778,89.8433-31.4908,64.635-
20,95.7143 2.2217,6.0089 15.1894,6.5147 14.2857,12.8572-2.163,15.1812-
35.86,5.7123-41.4286,20-11.7206,30.0724-2.9029,66.1325 35.7143,90 35.8971,8.326
49.3258,32.976 80,55.7143 42.6006-.6588 85.3826,23.525 108.5714,32.8571 146.0699
-84.8465-56.5656-37.3761-48.5714-94.2857 4.1547-26.6151 41.0264-35.5585 57.1429-
57.1429 11.3461-15.1955-25.1355-44.0457 27.1429-50-13.1512,26.7972 24.149,22.5866
14.2437,70.1015-48.8833,24.5331-83.4329,18.0782-71.8049,48.8165 42.6525,7.8687
158.0737,8.9842 42.3372,94.0109 12.5175,17.9569 38.863,19.1402 53.7955,54.2139
12.183,14.7807 22.5251,31.0139 32.8571,47.1429 12.6904,7.2452 29.9876,12.3599
38.5714,65.7143 9.2186,16.0938 35.6296,32.08 27.1429,48.5714-3.9463,7.6683-
15.4812,3.5597-25.7143,2.8571-9.5614-6.2965-4.4398-22.8497-10-32.8571-21.5176-
7.2137-17.4763-25.6968-30-34.2857-50.0257-14.9105-48.1921-30.9025-74.2857-27.1429
.8055,59.0851-22.5007,30.986-32.8571,24.2857-15.4674,27.4347-32.7313,7.7567-
38.5714-5.7143-9.05-.4279-18.7811-2.0595-27.1428,1.4286-6.5334,2.7254-
15.0067,7.2421-15.7143,14.2857-1.7706,17.6266 36.1816,25.7914 31.4286,42.8571-
4.9827,17.8905-33.0675,18.6412-51.4286,21.4286-15.1316,2.2971-11.8576,4.5404-
45.7143-4.2857-3.5262-14.7785 39.9873-9.1585 38.5714-24.2857-1.574-16.8162-
33.0184-9.3108-47.1429-18.5714-6.195-4.0617-15.1033-8.3317-15.7143-15.7143-.6757
-8.1648 17.5519-12.4865 14.2857-20-47.394,11.704-62.9362.3264-87.1429-11.4286-
10.6619,2.5507-18.2096,12.2171-27.1429,18.5714-11.0981,7.8943-21.8988,16.1986-
32.8571,24.2857-9.0427,6.6734-18.7271,12.5516-27.1429,20-8.8287,7.8139-
12.7783,23.1489-24.2857,25.7143-16.485,3.675-45.1591-1.7987-47.1429-18.5714-
2.7309-23.0896 41.9546-22.3958 57.1429-40 13.9114-16.1242 35.8963-37.1463
28.5714-57.1429-44.6272,12.4254-55.9656-4.9993-60-25.7143-7.8923,1.8631-
9.8671,12.9527-15.7143,18.5714-21.7727,20.9223-47.5679,26.0304-61.4286,52.8571-
4.8138,9.3169-3.4237,27.5108-11.4286,34.2857-12.0827,10.2262-41.0072,8.8775-
47.1429-5.7143z" fill="#000000">
</path>
</g>
</g>
</g>
</svg>
Como veis no deja de ser una hoja con una serie de apartados que vamos a ir poco a poco viendo en los video tutoriales
Aunque no es el objeto de este curso enseñar gráficos svg, si es interesante saber que se copia y que se pega en una pagina web
En este archivo podemos ver un encabezado que empieza en la etiqueta ¨<svg ¨
Luego podremos ver las etiquetas ¨<g ¨que son agrupaciones que van englobando el texto de los gráficos .
Luego tenemos la etiqueta¨<path ¨que es la representación alfanuméricamente lo que sería nuestro vector
Ya por ultimo tenemos las etiquetas de cierre tanto de los grupos¨</g ¨ como de la cabecera ¨</svg ¨
Vamos a Realizar una pequeña demostración del potencial que tienen la manipulación del texto,
Vamos,modificar la propiedad “fill” que es la que da el color,
Colocamos un color azulado y guardamos el archivo acordaros de cambiar la extensión a ”.svg” y
la lanzamos nuevamente a nuestro explorador ,
Podremos ver como nuestro vector ha cambiado de color.
Dentro del código svg no solo podremos encontrar la figura “path” si no que hay otras figuras primitivas
Aquí os muestro el texto, son bastante intuitivas de cómo han sido fabricadas,
Como son
Circle, polygon ,line, polyline, rect ya los comentados path
Si este archivo lo arrastramos al explorador veremos el resultado de la interpretación que realiza el explorador de ese texto svg para convertirlo en imágenes como son estas figuras primitivas.
Juguemos un poquito más con el código y cambiemos mas propiedades por supuesto no hace falta que lo hagáis solo son demostraciones
Vamos a crear un nuevo archivo de texto que le pondremos circulo.svg como nombre
Escribiremos en el esto
<svg width="140" height="140" xmlns="http://www.w3.org/2000/svg">
<circle cx="70" cy="70" r="60" fill="red" stroke="blue" stroke-
width="4"></circle>
</svg>
Aquí aparecen nuevos conceptos como son ;
El ancho y el alto de nuestro dibujo svg dentro de la etiqueta “svg”
Un Namespace que sirve para que el archivo xml sea interpretado correctamente por el explorador
En el circulo podemos cambiar donde está el centro del grafico svg .
El color con la propiedad fill y la propiedad stroke y stroke –whidth que modifica el color y el grosor del contorno
Asi podemos modificar las propiedades del los gráficos con solo modificar el texto,¿ interesante no¿ sobre todo cuando a lo largo del cursillo la uniremos a eventos y crearemos cambios de colores al pasar 1 segundo o poner grosores , lo que vuestra imaginación pueda hacer
Bien queda demostrado que se pueden crear gráficos vectoriales y modificarlos solo escribiendo en un editor de texto muy simple
Por suerte tenemos herramientas más profesionales como software de sobremesa los mas conocidos son Adobe illustrador, y la versión gratuita INKSCAPE donde se pueden manipular los gráficos vectoriales svg exportarlos e importarlos para crear animaciones
y por supuesto nuestro programa online https://animacionesweb.online donde en próximos videos veremos cómo crear logotipos banner en formatos svg y dales animación y todo online y gratis no dejes de subscribirte y dale un like, mandame tus progresos nos vemos en el siguiente video de creación de las figuras para logotipos online
Web design o diseño web hablando en castellano
es una asignatura obligatoria a todos aquellos diseñadores gráficos que deseen crear una página web llamativa, diseño web adaptable a los móviles y de creación rápida
En esta web desing veremos cómo hacer partes de ese diseño, sobre todo con animaciones web
Este desarrollo web lo vamos a experimentar sobretodo con los formatos svg y animaciones web con css donde podemos crear increíbles animaciones, que seguro va a gustar a todos los que os dedicáis al diseño grafíco web.
Podréis aplicar estas técnicas tanto en el desarrollo web de código abierto como para web disingn en WordPress
Crear logotipo : Los logotipos de empresas es el Símbolo o gráfico formado por imágenes ,letras o dibujos preferiblemente vectoriales.
Te enseñaremos clases de logos y como crear tu logotipo personalizado y desgargar tu logo gratis y sin registros
https://animacionesweb.online alli podras crear tu logotipo vectorial gratis, sin registros y descargarlo y poderlo manipular en software profesional como adobe illustrator, y asi poder llevar tu logotipo a empresas de impresión ya vectorizado
Como poner un video en html
Crear páginas web con videos cada día es más necesario, en este blog aprenderás a insertar videos en una pagina web y hacer animaciones con ellos y crear web desing o diseños web muy originales,
Explicaremos el código necesario para colocar una animación de un videos en nuestra página web de código abierto y en colocar videos animados en una página WordPress
Lo hemos separado por secciones para su mejor comprensión
Crear un favicon para wordpress
Crear un favicón online, para qué sirve un favicón y cómo influye un buen favicón en el diseño de nuestra página web,son preguntas que te responderemos en este blog ,
Crear un favicón para WordPress o para crear una página web, nunca fue tan fácil con nuestra herramienta de generador favicon WordPress
Favicón animado
Crear un favicón animado como icono de tu página web es una idea original y por ahora poco utilizada en el diseño de páginas web.
Si te gusta tener un icono animado como marca de tu empresa y que se vea como favicón de tu pagina web este es tu blog entra y crea tu icon personalizado y cambiar el favicon en wordpress
Texto animado
Como alternativa a la animación gif , podemos usar la animación de texto animados con css. Donde podemos hacer fácilmente imágenes animadas y texto con animacion
Desde nuestro blog animacion de texto online te enseñaremos como hacer desde letras con movimiento a la animación de textos completos creando increíbles animaciones web
Textos para web
Crearemos un texto personalizado online para la web gratis y enseñaremos como darle color de fondo al texto y utilizar css gradient para crear un texto online y asi realizar impresionantes rótulos para tu web
Podrás generar texto degradado online muy fácilmente y colorear tu texto o crear un logo personalizado y darle cualquier tipo de color y degradados
Luego si se desea se le podrá hacer cualquier tipo de animación web animate Web design