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:
El uso de tablas html no está muy bien visto si no es estrictamente para tabular contenidos. Pero también lo podemos hacer mediante display:table de css.
::before y ::after tienen muchos usos interesantes para dar estilos en nuestros documentos web. Este conocimiento te puede ayudar por ejemplo a estilizar listas html
En este ejercicio css se practica la creación de una paleta de colores mediante rgba. Además, se practican otros conceptos importantes como el selector de atributo. Incluye solución.
¿Problemas para memorizar colores hexadecimales? Vemos un ejemplo de como usar las variables de css3 para definir los colores de un proyecto web.
Ejercicio css sobre background en el que se pintan mediante gradientes algunas banderas (fáciles) del mundo. Incluye solución.
Serie de ejercicios de creación de menús con submenús desplegables mediante CSS. Incluye código y descargable.
No Comments