03 Dic Creación de logotipos con tipografías web
[kkstarratings]Definir los aspectos relativos al logotipo de una marca es una cuestión muy importante para cualquier proyecto y para la que es muy recomendable contratar los servicios de un diseñador profesional.
Alguien con estudios sabrá plasmar tu forma de ver la empresa y sabrá proyectar un significado mediante una imagen y/o texto.
Sin embargo, en ocasiones cuando simplemente estamos aprendiendo es natural que queramos jugar y dejemos rienda suelta a la imaginación.
Esta publicación va precisamente de esto último.
Diseñaremos logotipos usando nuestras iniciales, definiendo una paleta de colores y una tipografía.
Las siguientes entradas te serán de utilidad:
Pasemos al ejercicio.
Enunciado
Utiliza las siglas de tu nombre y apellidos para crear tu propio logotipo.
- Para ello elige en primer lugar una paleta de colores. Puedes valerte por ejemplo de esta herramienta.
- Elige en segundo lugar varias tipografías que te gusten. Puedes usar las disponibles Google Fonts. Puedes por ejemplo usar una tipografía con serifa, una sin serifa, una display y una handwriting. Uno de cada.
Te muestro a modo de ejemplo el resultado obtenido por mi.
Solución del ejercicio
Mi decisión personal para resolver el ejercicio ha sido usar
- Los colores: #045E67 y #3D3D3F.
- Las tipografías:
- Anton (sans-serif)
- Solway (serif)
- Bangers (display)
- Meddon (handwriting)
Observar el uso del selector de atributo mediante el que nos ahorramos muchas líneas de código en la hoja de estilos.
A continuación se adjunta el código usado para conseguir los 4 logotipos de la imagen del enunciado.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="author" content="francesc ricart"/>
<title>Logotipo con css</title>
<style>
*{box-sizing:border-box;}
a[class*="logo-"]{
width:100px;
padding:8px 4px;
margin:32px;
display:inline-block;
font-size:3.5em;
color:#045E67;
text-decoration:none;
}
a[class*="logo-"] span{
color:#3D3D3F;
}
a.logo-1{
font-family: 'Anton', sans-serif;
}
a.logo-2{
font-family: 'Solway', serif;
}
a.logo-3{
font-family: 'Bangers', cursive;
}
a.logo-4{
font-family: 'Meddon', cursive;
}
</style>
<link href="https://fonts.googleapis.com/css?family=Anton&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Solway&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Bangers&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Meddon&display=swap" rel="stylesheet">
</head>
<body>
<figure>
<a href="#" class="logo-1">F<span>R</span>M</a>
<a href="#" class="logo-2">F<span>R</span>M</a>
<a href="#" class="logo-3">F<span>R</span>M</a>
<a href="#" class="logo-4">F<span>R</span>M</a>
</figure>
</body>
</html>¡Hola!
Querido lector,
¿Qué logo de los mostrados te gusta más?
¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!
Entradas relacionadas:
Ejercicio en que se practica con la llamada e implementación de tipografías css desde distintos recursos web. Incluye solución.
Apuntes de alumno y ejemplos de como usar la propiedad float y clear. Esta publicación forma parte del "tutorial css - apuntes de clase"
Resumimos los principales factores que deberemos tener en cuenta desde el punto de vista de alguien que ha estudiado un curso de confección y publicación de páginas web para la optimización y mejora d...
Si no te atrae la idea de usar list-style-image para decorar listas, entonces puedes hacerlo con ::before y el uso de iconos de fontawesome.
Código css para ilustrar la diferencia entre el uso de visibility:hidden; y display:none; . Incluye ejemplo visual.
Las propiedades que controlan los estados de un enlace son :link, :visited, :hover, :active en este orden. Se muestra un ejemplo de uso para hacer un botón.
No Comments