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:
Las propiedades shorthand son muy útiles. En esta entrada aprenderás una forma práctica de recordar el significado de las abreviaciones para border, margin y padding.
Se explica que es el CSS, que significa en realidad el acrónimo y porqué se le llama así y hacemos una primera toma de contacto con este lenguaje web.
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.
Las dimensiones reales de una caja, por defecto, no son las que indica el width. Veamos como se calculan y en que nos puede ayudar aprenderlo.
Código html y css de como crear un menú vertical con un submenú horizontal.
Apuntes de alumno y ejemplos de como usar la propiedad float y clear. Esta publicación forma parte del "tutorial css - apuntes de clase"
No Comments