Cientos de estilos CSS para botones con degradado gratis

Hoy en día, con CSS, ya se puede hacer cualquier cosa. Atrás quedaron los tiempos en los que teníamos que usar imágenes de fondo para botones, hoy podemos crear estilos increíbles con un poco de CSS.
Hoy quiero compartir con ustedes una colección estilos CSS para botones con degradado.

Estilos CSS de botones degradados

Este genial recurso para diseñadores es parte del sitio Colorion, y van a poder encontrar cientos de diseños de botones con degradado (gradient) hechos íntegramente con CSS y con efectos muy elegantes.

Si miran la captura de arriba van a poder ver que los diseños están buenísimos. Pero eso es solo una muestra, les recomiendo que entren al sitio que van a encontrar muchísimos diseños para descargar.

Cuando encuentren un diseño que les guste, solo tienen que apretar el botón que dice «Get CSS Code», y les abrirá un popup con el código CSS listo para usar.

Sizzy, para probar tu diseño web en varios dispositivos a la vez

Hoy en día, tener un diseño adaptable, es un requisito esencial para todo sitio web; ya que todo el mundo usa sus teléfonos y tablets para navegar por internet. Pero hay que tener cuidado de que nuestro diseño se vea bien en todos los tamaños de pantalla.

Por eso hoy voy a recomendarles una herramienta genial llamada Sizzy, la cual nos permite probar nuestro diseño adaptable en varios dispositivos a la vez.

Sizzy, para probar diseños web adaptables en varios dispositivos

Sizzy es extremadamente simple de usar. Es tan fácil como pegar la URL del sitio web que queremos testear y esperar unos segundos a que carguen todos dispositivos.

Probar nuestro diseño en varios dispositivos

Lo bueno de esta web es que tiene varios dispositivos disponibles para que probemos nuestro diseño.

En la parte izquierda está la barra de herramientas desde la cual pueden controlar si quieren probar el diseño con iPhone o Android. Y allí se pueden seleccionar los modelos que queremos, que pueden ser todos los de Apple o sino en Android. Se puede elegir el Nexus 6P, Galaxy S4 o Nexus 7.

Algo que me pareció muy útil es que tiene la opción de mostrar u ocultar el teclado del teléfono. Esto es genial ya que nos permite ver el diseño en todos los escenarios posibles.

Conclusión

Creo que es un recurso que todo diseñador o webmaster tiene que tener en marcadores. Es completamente gratuito y nos permite saber, en pocos segundos, si nuestro diseño se ve bien en los dispositivos más usados del mercado.

 

FotoJet, editor de imágenes online con funciones increíbles

Los editores de imágenes nunca están demás en nuestros favoritos, por eso les quiero recomendar un genial servicio que les permitirá editar fotografías online, aplicarles efectos, marcos, textos personalizados y mucho más.

Editor de fotos FotoJet

Se trata de FotoJet, un editor de imágenes online que está pensado para personas que no sepan nada de diseño. Se centra en su facilidad de uso y en la calidad de los efectos que podemos aplicarles a las fotografías.

Editar fotos

Tiene una sección de editor de imágenes donde podemos hacer todo tipo de ediciones sin saber nada de diseño. Hay herramientas para redimensionar, recortar, rotar, gestionar colores, exposición, etc.

Se pueden aplicar efectos de todo tipo; bordes o marcos para darles mejor estilo a las imágenes; agregar texto de diversos formatos y con efectos muy divertidos. También se pueden aplicar cliparts y capas con efectos que están muy buenos.

Crear diseños gráficos

Si tienen la necesidad de crear flyers, pósters, tarjetas, tapas de revista o cualquier tipo de diseño más sofisticado; esta herramienta puede hacerlo. Tiene varias plantillas listas para editar a nuestro gusto sin tener conocimientos de diseño gráfico.

Crear collages

Por último tiene una herramienta muy útil para crear collages de fotos de una manera muy intuitiva y con plantillas que están muy buenas.

Cómo crear firmas HTML fácil, rápido y gratis con Si.gnatu.re

Cuando uno trabaja de internet tiene que cuidar la imagen y los detalles, ya sea si trabajamos de forma independiente o para alguna empresa, nunca hay que dejar pasar ciertas cosas. Una de ellas es tener una buena firma para el correo electrónico, una en la cual estén todos nuestros datos de contacto e información personal para que los clientes puedan contactarnos sin problemas.
Por eso hoy quiero recomendarles un excelente servicio online para crear firmas HTML para insertar en cualquier cliente de correo o servicio de mail online.

HTML_Email_Signature_Generator

El servicio que quiero comentarles se llama Si.gnatu.re, y el punto principal que me gustaría destacar es su simplicidad de uso. Tiene una interfaz muy intuitiva que nos permite agregar todo tipo de datos que conformarán nuestra firma sin tener ningún conocimiento de diseño o maquetación.
Está todo organizado mediante pestañas en las cuales vamos ingresando los datos personales:

General: En esta pestaña podemos introducir todos los datos más personales como nombres, cargo, mail, teléfono, sitio web, nombre de la compañía, dirección, etc.
Social: Este es el lugar para agregar nuestros perfiles sociales, no se preocupen que hay de muchas redes.
Images: Aquí podemos poner un logo o un banner con su respectivo enlace.
Styles: Tenemos la opción de elegir entre varios diseños de templates, cambiar el tamaño de letra, su color, darle bordes redondeados a los logos, etc.
Bespoke: Aquí se puede agregar cualquier tipo de texto adicional que creamos necesario.

Una vez que hayan introducido todos los datos que crean necesarios pueden generar el código HTML que tendrán que pegar en su cliente de correo. El código lo pueden descargar en un archivo o copiarlo y pegarlo directamente. Además les generará un enlace único para acceder más adelante a la firma y obtener el código.

Me imagino que ya se estarán preguntando por el costo de este servicio, pero les tengo muy buenas noticias, es completamente gratis salvo por un detalle: La firma puede editarse durante 30 días, pasado este tiempo no podrán hacer ninguna edición, salvo que paguen 5 dólares.
Obviamente esto no es ningún impedimento, la firma seguirá funcionando perfectamente sin tener que pagar un centavo. Tómense el trabajo de hacerla bien a la primera y listo, para qué editar.

Logomakr: Crea logos online en minutos y sin saber nada de diseño

Cuando estamos iniciando un nuevo emprendimiento, ya sea online u offline, siempre aparece el tema de la creación del logo, algo que, para los que saben de diseño gráfico, es una tarea muy simple; pero el problema es cuando no tenemos el más mínimo talento o conocimiento de diseño.

Por suerte en internet hay herramientas gratuitas para todo, y Logomakr es una de ellas.

Esta genial aplicación web viene a salvarnos a la hora de crear logos de manera simple y rápida sin tener que instalar nada en el equipo. Es muy útil sobre todo para los que tenemos poca paciencia y queremos el resultado rápido.

Cómo crear un logo online y gratis con Logomakr

logomakr

Como pueden ver arriba, el resultado al usar Logomakr es excelente, y lo mejor de todo es que es tan simple de usar que, calculo, no les llevará más de 5 minutos crear el logo.

Obviamente la herramienta no hace magia, ustedes también tienen que poner un poquito de lo suyo. No se preocupen, solo les hablo de creatividad y buen gusto a la hora de elegir los componentes del logo.

Algo que es espectacular es que posee una gigantezca base de datos de gráficos o íconos de uso libre a la cual podemos acceder con solo hacer una búsqueda. Tenemos que navegar por la lista de gráficos hasta que encontramos uno que es de nuestro agrado y lo enviamos al escritorio de trabajo.

Allí tenemos la posibilidad de agregar el texto y elegir muchas tipografías distintas, cambiar colores y hacer todo tipo de modificaciones que nos gusten.

Por último solo queda descargar el logo en formato PNG y usarlo donde queramos.

Herramienta gratuita para diseñar banners online y sin conocimientos

Banner Maker

Los banners siempre están vigentes de hace años y supongo que lo seguirán estando por muchos años más, o hasta que alguien invente un sistema que nos inserte la publicidad directamente en el cerebro al mejor estilo notificaciones push (?).

El problema viene cuando tenemos que diseñar un banner y no tenemos ningún programa para ello o carecemos de los conocimientos de diseño necesarios. Para estos casos les quiero recomendar una aplicación web muy buena llamada Fotor Banner Maker, la cual nos permite diseñar banners online de manera sencilla y sin ningún tipo de conocimiento de edición de imágenes.

Su uso es tan simple como entrar al sitio, elegir el tamaño del banner que queremos crear y comenzar con la personalización. Allí podrán elegir una imagen de fondo, la cual podrán subirla desde facebook, desde su equipo o usar alguna imagen de la web. También se puede agregar texto en colores y formatos que queramos.

Enlace: Banner Maker

Visto en Soft&Apps

¿Cuál es la diferencia entre Photoshop e Illustrator?

diferencia entre photoshop e illustrator

diferencia entre photoshop e illustrator

Durante estos últimos meses en los que me estuve enfocando en diseño gráfico, una duda que me surgió fue la del título ´ ¿Cuál es la diferencia entre Photoshop e Illustrator?‘. En este artículo, explicaré las más notorias diferencias entre ambos programas y cuáles son las situaciones ideales para utilizar uno u otro.

Photoshop e Illustrator son dos de los masivamente populares programas gráficos de Adobe. Si estás trabajando en un proyecto nuevo, puede ser que tengas problemas para darte cuenta sobre cuál de los dos programas te será más conveniente, ya que en la superficie se ven similares. He compilado algunas de las principales diferencias entre Photoshop e Illustrator para ayudarte a comenzar.

Adobe Photoshop

Photoshop es un gran programa para modificar imágenes o gráficos ya creados, como fotos, y es el programa más popular de Adobe. Los mapas de bits o imágenes ráster son creados en Photoshop. Estos gráficos pueden verse un poco irregulares ya que las imágenes de mapas de bits se componen de cuadrados de colores individuales, conocidos como píxeles.

Todo en Photoshop es simplemente una serie de pixeles, así que si escalas algo más cerca o lejos, puede perder su calidad rápidamente. Photoshop es una elección popular para gráficos web, edición fotográfica y diseños ya que estos proyectos se mantienen en tamaños fijos. Editar fotos es fenomenal en Photoshop, porque incluye muchos filtros únicos, efectos especiales y herramientas.

Otro gran beneficio de Photoshop es que puedes tener control completo de tus proyectos, ya que puedes editar tus gráficos pixel por pixel.

Adobe Illustrator

Illustrator es un software avanzado basado en vectores. Así que, a diferencia del formato de pixeles de Photoshop, éste utiliza construcciones matemáticas para crear gráficos vectoriales. En Illustrator, una línea se compone de dos puntos conectados por un algoritmo de computadora, en lugar de sólo una línea de píxeles. Por esto, Illustrator suele ser utilizado para crear logos o cualquier cosa que se necesite imprimir o presentar en diferentes tamaños. Un vector gráfico nunca perderá su calidad si se lo escala cerca o lejos.

Illustrator además te dará un mejor resultado impreso ya que no depende de la resolución.

Un inconveniente de Illustrator es que no puede ser utilizado fácilmente para modificar imágenes que ya han sido creadas, debido a que hay filtros limitados y herramientas de edición de imágenes disponibles para ti.

Conclusión

De seguro notarás que algunas personas prefieren utilizar un programa sobre otro, pero a veces es mejor utilizar Photoshop e Illustrator juntos. Por ejemplo, quizás quieras agregarle algo de texto a una imagen que tienes que editar. Puede ser que necesites agregar una marca de agua a la foto para tu blog o sobre una imagen para tu portafolio. Es mejor no agregar ningún texto a una imagen en Photoshop ya que se puede distorsionar, así que transferir la foto editada a Illustrator y después añadir el texto te daría el mejor resultado.

Uno no es definitivamente mejor que el otro, son diferentes. Entender las diferencias básicas entre Photoshop e Illustrator te ayudará a tomar la mejor decisión sobre qué software es mejor para tu próximo proyecto.

Este artículo está basado en uno visto en Digital Tutors

Cualquier consulta que tengas al respecto no dudes en hacerla abajo en los comentarios o por medio de mi Twitter (@AyalaManu) que estaré más que contento de poder ayudarte

Los 30 mejores bancos de imágenes gratis del 2015

Siempre es bueno tener este tipo de recursos en nuestra caja de herramientas, sobre todo cuando tenemos que acompañar algún post o usarlo para algún proyecto.

A continuación les voy a dejar una lista con los 30 mejores bancos de imágenes gratis para que puedan encontrar lo que quieran.

IM-Creator

1- IM Creator

IM Creator es un sitio con una gran cantidad de recursos para diseñadores en el cual podemos encontrar plantillas, íconos, un generador de íconos, y obviamente lo que nos interesa: un gran banco de imágenes gratis organizadas por categorías. Pueden encontrar fotografías de ciudades, personas, naturaleza, tecnología, negocios, y mucho más.

2- picjumbo

Creo que a picjumbo lo hemos comentado alguna vez en el blog, pero nunca está demás refrescar un poco la memoria de los lectores. En este sitio van a encontrar una infinidad de fotografías gratis para usar libremente en nuestros proyectos. Obviamente está todo organizado por categoría y etiquetas. Las imágenes son de muy alta calidad.

3- Gratisography

Es un muy buen banco de imágenes gratis en alta resolución y libres de restricciones de copyright. Tiene muchas imágenes, pero la desventaja es que no están organizadas de ninguna forma, solo podemos ir navegando por la galería y algo nos gusta lo descargamos.

4- Unsplash

Otro banco de imágenes gratis en alta resolución; tiene un diseño austero pero con fotografías de mucha calidad, y lo mejor de todo es que son libres de derechos. La navegación es simple, no tiene organización, pero por lo menos tiene un buscador. Agregan 10 fotos nuevas cada 10 días.

5- Snapwire Snaps

No es un banco de imágenes común y corriente, se trata de un tumblr donde suben 7 fotos nuevas cada 7 días. Las imágenes son en alta resolución y completamente gratis.

6- SplitShire

Un sitio con impactantes imágenes en alta resolución y libres de derechos para descargar. Tiene navegación por categorías en la parte izquierda, entre las cuales encontramos, naturaleza, animales, autos, abstractos, paisajes, tecnología, y mucho más.

7- Moveast

Creo que este es uno de los sitios más simples que les comento de la lista, tiene una gran cantidad de fotos pero ninguna organización o forma de buscar. Solo miren las imágenes y listo :P.

8- Lock & Stock Photo

Otro sitio extremadamente simple como el anterior. Es un blog donde van subiendo fotos todos los días, gratis y en alta resolución.

9- Magdeleine

Magdeleine es un gran sitio, todos los días suben una nueva fotografía en alta resolución y libre de derechos para que uses de forma personal o comercial. Se puede buscar por categoría, por tags o por color.

10- New Old Stock

Este sitio tiene una onda vintage, suben fotografías con este estilo y son libres de derechos. Otra web de simple navegación, solo vayan mirando las fotos y cuando encuentren algo que les guste lo bajan.

11- jay mantri

Otro blog de tumblr que sube 7 fotografías nuevas cada jueves. Todas las fotos son en alta calidad y por lo que veo, el autor tiene cierto amor por las fotos en blanco y negro :P.

12- Life Of Pix

Life Of Pix es un interesante sitio con un diseño simple que tiene una gran cantidad de imágenes gratis libres de derechos para usar en proyectos personales o comerciales. Podemos navegar por la galería de fotos o bien usar el buscador, más simple imposible.

13- FreeJPG

Este sitio parece ser argentino y tiene una gran colección de imágenes en alta resolución completamente gratuitas. Todas están organizadas por categorías, además tiene un buscador y un diseño excelente. Hasta el momento tiene casi 4500 fotos muy buenas que seguramente les serán de utilidad.

14- Skitter Photo

Otro banco de imágenes gratis HD donde podemos ir navegando por categorías como flora, fauna, HDR, paisajes, personas y muchas más.

15- Pixabay

Pixabay es un banco de fotos gratis que tiene más de 390.000 imágenes libres para descargar y usar en cualquier tipo de proyecto. Hay categorías como comidas, animales, arquitectura y edificios, ciencia, educación, monumentos, y muchísimas categorías más. Realmente muy recomendable.

16- DesignerPics

Este sitio con diseño simple pero funcional, tiene una muy buena colección de imágenes HD gratuitas y libres de derechos. Están organizadas por categorías y también pueden usar el buscador para encontrar los contenidos.

17- Stokpic

Stokpic es un banco de imágenes gratis que tiene una infinita colección disponible para todos los usuarios. El sitio tiene un diseño perfecto organizado por categorías y un buscador para hacer las cosas más simples. También ofrecen la opción de suscribirnos a un boletín de noticias en el cual nos envían 10 nuevas fotos cada 2 semanas a nuestro mail.

18- Kaboompics

Kaboompics es otro sitio con un diseño muy profesional que tiene una interesante base de datos de imágenes gratis para uso personal o comercial. Con una excelente navegación, podemos buscar imágenes con el buscador, mediante tags o categorías. Muy recomendable ;)

19- Picography

Un sitio muy simple, no hay mucho para decir de él, solo que tiene imágenes muy buenas en alta resolución, y libres claramente.

20- openphoto

El sitio número 20… uno que se define como fotos «open source», en el cual encontramos un gran banco de imágenes en HD gratuitas para descargar. Pueden navegarlo de diversas formas, una es viendo la portada con la foto del día y las demás que están publicadas. O bien pueden usar el buscador y las categorías para encontrar cosas de su interés.

21- ISO Republic

Este es un banco de imágenes no tan grande, tendrá unas 250 fotos o un poco más, pero todas son de muy alta calidad así que seguramente algo podrán rescatar de ahí.

22- Stocka

Stocka es otro gran banco de fotografías libres para uso personal o comercial. Tiene una gran base de datos y todos los días se agregan nuevos contenidos. Pueden navegar por las categorías para encontrar lo que desean.

23- Snapographic

Este sitio es pequeño, y esto se debe a que las fotografías publicadas son tomadas únicamente por su creador, Thomas Mühl. Esto no quiere decir nada, al ser tomadas por él, verán que la calidad de las mismas es excelente.

24- raumrot

Otro sitio más con imágenes en alta resolución listas para ser descargadas. Eso sí, hay que respetar os créditos del autor. Hasta el momento tiene casi 600 fotografías en la base de datos, pero le s aseguro que son muy buenas.

25- Photo Collections

Otro sitio que me gustó mucho y quiero compartirlo con ustedes. Aquí podrán encontrar fotografías gratis y libres navegando mediante tags o buscando con el buscador. Tienen dos modos de visualizar las fotos, una es con detales, donde veremos datos EXIF, y el otro es mediante grilla.

26- Public Domain Photos

Aquí van a poder encontrar más de 5000 fotografías gratuitas para descargar. Tiene un diseño pobre y hasta anticuado, pero funciona :P.

27- Free Digital Photos

Con un nombre bastante claro, allí podrán encontrar un excelente banco de imágenes gratis para todo tipo de usos. Hay un buscador para encontrar por palabra clave o bien navegando por las categorías.

28- FreePixels

Es un sitio con casi 6000 imágenes de stock gratuitas y libres para usar de la forma que queramos.

29- Freepik

Freepik es un sitio con recursos gráficos de todo tipo, pero también tiene su sección de banco de imágenes gratis donde hay más de 175.000 disponibles. Entren porque no se van a arrepentir.

30- EasyStockPhotos

Y llegamos al último de la lista… que en realidad es más un metabuscador de imágenes libres que nos permite encontrar imágenes gratis en muchos otros sitios pero desde un solo lugar.

Bueno, espero que les haya servido esta lista de bancos de imágenes gratis, sepan apreciar el tiempod e trabajo que llevó y háganle me gusta, compartan por todos lados, y ya que están valórenlo con las estrellitas que están aquí debajo :)

Más de 840 plantillas responsive en HTML5 y CSS para descargar gratis

Cuando no tenemos muchos conocimientos de diseño web, lo mejor siempre es partir de alguna plantilla ya armada y retocarla modificándoles cosas a nuestro gusto, así nos ahorramos mucho trabajo, tiempo y dinero. Por eso hoy les quiero dejar una web muy útil en la cual encontrarán más de 840 plantillas HTML5 y CSS completamente gratuitas para descargar y usar en los proyectos que quieran.

plantillas html5 gratis

El sitio se llama templated.co, y en él van a encontrar una lista interminable de plantillas bajo licencia creative commons que podrán bajar sin tener miedo de usar en sus sitios, nadie les reclamará nada.

En la lista verán una vista previa de la plantilla y el link para poder verla completa y descargarla. Además de eso también les indicará qué tipo de plantilla es, si HTML5 responsive, HTML5 o solo CSS.

Enlace: templated.co

Visto en Maestro de la Computación

UICloud: Más de 1200 kits de interfaces gráficas gratis

En internet existen todo tipo de recursos gratuitos que hacen la tarea de los diseñadores y programadores mucho más simple, y un claro ejemplo de ello es UICloud, un buscador que nos permite buscar y descargar interfaces gráficas para usar en cualquier tipo de proyecto.

Hasta el momento de la publicación de este post, y como pueden ver en la captura de arriba, tienen disponibles más de 46 mil elementos gráficos y más de 1200 kits completos de interfaces gráficas.

UICloud

Sobre el funcionamiento no hay que decir mucho, es un simple buscador que, con solo ingresar una palabra clave, nos mostrará todos los resultados disponibles de manera muy visual y cómoda para el usuario.

Por ejemplo, si están buscando barras de progreso o botones de descarga pueden encontrar miles de alternativas y luego descargarlas gratis para sus proyectos.

UICloud

Visto en Nerdilandia