Web design

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

Logotipo vectorial gratis

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

Animaciones realizadas por https://animacionesweb.online © ¡¡Gracias por entrar a mi blog!!

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

Texto con degradados
Texto con degradados