I came across this nicely designed audio player on CodePen, put together by Michael Zhigulin It uses the waves.js click effect library...
Creating a simple typographical logoAshley
Whilst working on my most recent project ‘We deliver’, I had the need for a simple logo that wasn’t overly fussy but still slick contemporary and simple to design. I thought I’d put the design stages together into a short blog post explaining the simple technique.
The most important part of typographical logo design in my view is the font. A great free resource for fonts is DaFont.com, in fact this is where I found both of these fonts. the main font for the logo is called ‘Serif’ by JÃ¼rgen Geiger, and the fancy font for the text below is called ‘Snell Roundhand’.
The Final Logo
first we need to create a text layer with our logo text in.
Create the Emboss
Once we have our text layer in place, to create the embossed effect all you have to do is duplicate the text layer that we already have, remove any effects that you may have applied and drop the layer below the original text layer.
I’ve applied a soft gradient to my text, the reason I did this was to highlight the white emboss effect at the bottom.
The key now is to balance the colours and shades so the design fits just right. I’ve added a shallow drop shadow just to add some definition around the edges. I’ve used the font ‘Snell Roundhand’ to add the sub header just below the main logo, using two fonts helps to make your design stand out, it’s important though not to go mad with different fonts and styles as your design will quickly look messy.