awkward. // The Cupcake Team

sábado, 6 de julio de 2013 @ 2:48

0 +

[Tutorial Photoshop]: Cómo hacer un brush sencillo o complejo (parte 1)

¡Hola! Siento muchísimo no haberme pasado por aquí nada desde que empezaron las vacaciones... pero he estado muy liada y casi no he tocado el ordenador :'( Pero tranquilas, que ahora me pondré a tope con el blog! También empezaré a trabajar en un nuevo diseño!

Hoy traigo un tutorial para Photoshop sobre cómo hacer un brush, y no sólo eso, también os enseñaré a hacer que cambie de posición, de tamaño o de color. Así que... ¡aquí el tutorial!

Si solo queremos un pincel simple pararemos aquí. Pero si queremos que nuestro pincel cambie de posición, de color o de tamaño, haremos lo siguiente.

Primero iba a hacerlo solo en una parte, pero hay un montón de cosas que se pueden modificar y para explicarlas todas me harán falta muchas entradas.

Y terminamos esta entrada con las super recomendaciones de Miku xD

Me he enganchado muchísimo a esta youtuber, hace cosas preciosas! Incluso ha conseguido que intente dejar de comerme las uñas ----------> TheCoOlbrush

Y he empezado a leer un libro en el ordenador que me está encantando -------> Pequeñas mentirosas

Etiquetas: Brushes, Photoshop, Tutoriales

viernes, 24 de mayo de 2013 @ 7:18

3 +

[Tutorial Blogger]: Efecto lluvia de estrellas en el blog

¡Hola! Traigo un tutorial muy lindo para blog. Yo lo llamo efecto lluvia de estrellas.

Podéis verlo ahora mismo en mi blog, o si no está en esta preview del blog del que saqué el tutorial.

[PREVIEW]

Para ponerlo:

Etiquetas: Blogger, Cosas cayendo por el blog, Lluvia, Tutoriales

viernes, 26 de abril de 2013 @ 14:09

0 +

Tutorial Photoshop: Cómo hacer el header "Bajo el océano"

¡Hola! Bueno, en esta entrada traigo el tutorial de cómo hacer el header "Bajo el océano", que es el que estaba puesto hasta hace muy poquito, antes de poner el layout. Bueno, les refresco la memoria:

A mí este header me encantó desde que lo hice y vi cómo me quedaba, así que traigo el tuto.

Necesitaremos:
-2 png's
-2 fotos

Comencemos.

1. Abrimos un documento de 900x400 o medidas similares (no mucho mayores).

2. Pintamos el fondo de un color liso. Si quieren que parezca de verdad el océano, pongan azul, como yo, aunque pueden hacerlo de cualquier color, quedará bien.

EL PASO TRES Y EL CUATRO SE PUEDEN REALIZAR AL FINAL DE TODO, PERO YO LOS HICE AQUÍ PARA QUE SE VIERA DESDE EL PRINCIPIO CÓMO IBA QUEDANDO

3. Abrimos una nueva capa. Clickamos en Capa>Nueva capa de relleno>Degradado. En la primera ventanita clickamos Ok, en la segunda escogemos el primer degradado (¡no es el que aparece por defecto!) y le ponemos el color de fondo y otro de la misma gama. Clickamos Ok.

4. Botón derecho en la capa del degradado>Opciones de fusión y lo ponen en "Trama". Aunque parezca que no sirve de nada, luego sí servirá para algo.

LA CAPA DEL DEGRADADO SIEMPRE TENDRÁ QUE QUEDAR ENCIMA DE TODAS LAS DEMÁS

5. Abrimos uno de los png y lo acomodamos a un lado del header. Procuramos que quede bajo la capa del degradado. Nota: para esto es para lo que sirve que el degradado esté en modo "Trama". Si no estuviera, el png no se vería.

6. Con el lazo poligonal hacemos como si fuéramos a recortar el png dejando algo de borde. Lo pueden ver en esta imagen:

7. Cuando lo tengamos seleccionado, damos botón derecho (tienes que estar en la capa del png) y seleccionamos la opción "Contornear". Le pones un borde de dos píxeles y el color que tú quieras. Repites este paso otras dos veces para que te queden tres bordes de distinto color. No lo pongas un color demasiado parecido al del fondo. Quedaría así:

8. Duplicamos la capa del png, le damos CTRL+T>botón derecho>Voltear horizontal y la acomodamos al lado opuesto del header.

9. En la capa del header duplicado clickamos Imagen>Ajustes>Desaturar.

10. Clickamos CTRL+T y ampliamos un poco el png duplicado (no mucho).

11. Vamos a Opciones de fusión y la bajamos la opacidad a 40.

12. Abrimos el otro png y lo acomodamos entre estos dos, pero ponemos la capa encima.

13. Imagen>Ajustes>Umbral>Y le ponemos una cifra con la que se vean bien los rasgos.

14. Opciones de fusión>Modo Luz suave (u otro que quede bien. Yo suelo probar con Luz suave, Aclarar y Trama, y si ninguno me convence también pruebo Superponer. También puede pasar que o se quede igual o desaparezca. En ese caso, le bajamos la opacidad a 70, 50 o 40.)

15. Abrimos las dos fotos. Marco rectangular>Estilo>Proporción fija>Anch.: 1 Alt.:1>Recortamos la cara>CTRL+C>(En el header) CTRL+V

16. Lo acomodamos. Repetimos este paso y el paso anterior con otra foto.

17. Hacemos tres bordes de colores a las fotos (como en el paso 6 y 7).

18. Colocamos las fotos más o menos como estas:

OPCIONAL

Mensaje de bienvenida (yo no lo tengo). Hacemos un rectángulo blanco con la herramienta rectángulo redondeado, le ponemos la opacidad en 50 y le colocamos sombra paralela. Escribimos dentro. Yo les recomiendo la fuente Pokemon GB en tamaño 8 y en color negro. EL RECTÁNGULO Y LA FUENTE SE COLOCAN ENCIMA DE LA CAPA DEL DEGRADADO.

FIN DEL OPCIONAL

19. Escribimos el nombre de nuestro blog (yo me inventé uno para esta cabecera). Como tenemos el degradado por encima, los colores son bastante limitados y tendremos que buscar uno que se vea bien.

El resultado:

Me acabo de dar cuenta de que tendría que ser "I was trouble". Pero bueno.

Y bueno, he terminado el layout, pero no me gusta mucho. Creo que haré otro y luego volveré a poner el diseño normal (es más cómodo xD).

Etiquetas: Photoshop, Selena Gomez, Taylor Swift, Tutoriales

jueves, 18 de abril de 2013 @ 11:51

1 +

Tutorial Blogger: Efecto Opacidad en imágenes

¡Hola! Hoy traigo un efecto muy lindo y muy fácil de hacer para las imágenes del blog. Es un efecto de opacidad, pero no puedo poner ejemplo, lo siento, tengo el blog de pruebas ocupado haciendo un nuevo diseño. Seguramente sea un layout, no me gustan mucho, pero quiero practicar y probar para poder hacerlos por pedido :)

Bueno, vamos al tutorial.

Diseño.

Añadir un gadget

HTML/Javascript

Y copiamos el siguiente código:

<style> /* ----- Image opacity effect 2 ----- */ .post a img { filter:alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5; -khtml-opacity: 0.5; }
.post a:hover img { filter:alpha(opacity=100); -moz-opacity: 1.0; opacity: 1.0; -khtml-opacity: 1.0; } </style>

Y listo :)

Créditos: ♥

Etiquetas: Blogger, Image Hover, Opacidad, Tutoriales

domingo, 7 de abril de 2013 @ 7:36

1 +

Tutorial: Blend Bridgit

Para este tutorial necesitaremos:
-4 png's de un artista.
-1 textura light.

1. Abrimos un nuevo documento de 500x500 o medidas similares.

2. Pintamos el fondo de un color que nos guste.

3. Abrimos un png y lo colocamos más o menos por el centro.

4. Damos botón derecho en la capa del png>Opciones de fusión>Modo Luz suave. Si es necesario le bajamos un poco la opacidad.

5. Abrimos otro png y lo colocamos abajo al centro.

6. Duplicamos la capa.

7. Vamos a la capa del png de más abajo. Clickamos Imagen>Ajustes>Desaturar. Movemos el png hacia la izquierda y lo empequeñecemos un poco.

8. Duplicamos la capa del primer png y la colocamos a la izquierda del png en blanco y negro.

9. Cogemos otro png y lo colocamos a la derecha del lienzo. Lo duplicamos dos veces (conseguimos tres png's iguales). Si este png se superpone con el png grande del centro (el que hemos duplicado antes), lo colocamos debajo.

10. A los dos png's de abajo les aplicamos un estilo que combine. Separamos uno hacia la izquierda y el otro hacia la derecha. Los combinamos.

11. Colocamos los png's combinados en modo Luz fuerte o Luz suave y si es necesario les bajamos la opacidad.

12. Cogemos otro png. Clickamos CTRL+T>Botón derecho>Voltear vertical y lo colocamos arriba en modo Luz fuerte. Este modo no siempre queda bien, así que si no nos gusta el resultado, exploramos otros modos.

13. Por encima de todo colocamos la textura light en modo Luz suave. Dejaré más abajo la que usé para el blend original de Bridgit.

14. Añadimos texto y listo.

La textura:

Etiquetas: Blends, Martina Stoessel, Tutoriales

domingo, 24 de marzo de 2013 @ 5:19

0 +

Tutorial Blogger: Centrar el header

¡Hola! Traigo un tuto superfácil de cómo centrar el header en el blog.

Empezamos.

Plantilla

Personalizar

Avanzado

Añadir CSS

En el recuadrito que aparece añadimos lo siguiente:

.header .widget { text-align:center;}.header img {margin:0 auto;}

¿No era fácil? Lo saqué de aquí (X)

Etiquetas: Blogger, Tutoriales

martes, 19 de marzo de 2013 @ 8:39

0 +

Tutorial Photoshop: Cabecera para tu blog

Traigo un tutorial para Photoshop (¡el primero!) de una cabecera para vuestro blog. ¡Espero que os guste!

1. Abrimos un nuevo documento de las medidas que queramos (yo lo hice de 900x400 píxeles)

2. Escogemos dos colores que nos gusten y que combinen. Yo elegí naranja y azul, que al ser colores complementarios nos van a quedar bien.

3. Clickamos en Capa>Nueva capa de relleno>Degradado. Damos Ok en la primera ventana y en la segunda clickamos en la primera flechita y escogemos el primer degradado. Luego clickamos en Ok.

4. Abrimos un png y lo acomodamos hacia la derecha.

5. Con una goma de dureza cero le borramos la parte de abajo al png.

6. Abrimos otro png, a ser posible del mismo shoot.

7. Acomodamos el png a la izquierda.

8. En el menú de capas, damos botón derecho sobre la capa del segundo png>Opciones de fusión y le bajamos la opacidad al 44%

9. También difuminamos con la goma la base de este png.

10. En una nueva capa aplicamos bokeh brushes (podéis encontrarlos en deviantart) con el color más claro de los que hayáis usado.

11. Clickamos en la capa de los brushes>Opciones de fusión y le bajamos la opacidad al 20%

12. Añadimos el nombre del blog con el color más oscuro de los que habéis elegido.

13. Aplicamos una textura debajo de la capa del texto. En Opciones de fusión la ponemos en modo Aclarar, Trama o Luz suave, como quede mejor. Yo la puse en modo Aclarar.

El resultado:

Etiquetas: Photoshop, Tutoriales

lunes, 18 de marzo de 2013 @ 7:51

2 +

Dos cbox deslizantes+iconos cbox

¡Hola! Traigo dos tutoriales de cbox deslizables y algunos iconos de cbox. Los dejo aquí.

1. Cbox flotante sin fondo (como la tengo yo).

En un gadget HTML/Javascript se copia lo siguiente:

<center><style type="text/css">#at{position:fixed;right:250px;z-index:+1000;}* html #at{position:relative;}.attab{height:100px;width:30px;float:left;cursor:pointer;background:url();}.atcontent{float:left;border:none;background: repeat-x bottom center scroll ;-moz-border-radius:20px;padding:10px;}</style><script type="text/javascript">function showHideAT(){var at = document.getElementById("at");var w = at.offsetWidth;at.opened ? moveAT(0, -200-w) : moveAT(20-w, 0);at.opened = !at.opened;}function moveAT(x0, xf){var at = document.getElementById("at");var dx = Math.abs(x0-xf) > 25 ? 35 : 1;var dir = xf>x0 ? 1 : -1;var x = x0 + dx * dir;at.style.top = x.toString() + "px";if(x0!=xf){setTimeout("moveAT("+x+", "+xf+")", 10);}}</script><div id="at"><div class="attab" onclick="showHideAT()"> </div><div class="atcontent"><div align="center"><div style="background:url() no-repeat;"><div style="text-align: center;"><div class="separator" style="clear: both; text-align: center;"><br /><form name="news"><textarea rows="1" style="border:3px double #E3CEF6;-moz-box-shadow: 0 0 15px 5px #E3CEF6;-webkit-box-shadow: 0 0 15px 5px #E3CEF6;border-radius:7px;font-size:12px;font-family:century gothic;cursor:crosshair;" cols="30" name="news2" wrap="virtual"></textarea><script language="JavaScript">var newsText = new Array();newsText[0] = "TEXTO";newsText[1] = "TEXTO";newsText[2] = "TEXTO";newsText[3] = "TEXTO";newsText[4] = "TEXTO";newsText[5] = "TEXTO";newsText[6] = "TEXTO";newsText[7] = "TEXTO";
var ttloop = 1; //var tspeed = 70; //var tdelay = 1000; //// ------------- CANNOT EDITING ------------- \var dwAText, cnews=0, eline=0, cchar=0, mxText;function doNews() {mxText = newsText.length - 1;dwAText = newsText[cnews];setTimeout("addChar()",1000)}function addNews() {cnews += 1;if (cnews <= mxText) {dwAText = newsText[cnews];if (dwAText.length != 0) {document.news.news2.value = "";eline = 0;setTimeout("addChar()",tspeed)}}}function addChar() {if (eline!=1) {if (cchar != dwAText.length) {nmttxt = ""; for (var k=0; k<=cchar;k++) nmttxt += dwAText.charAt(k);document.news.news2.value = nmttxt;cchar += 1;if (cchar != dwAText.length) document.news.news2.value += "_";} else {cchar = 0;eline = 1;}if (mxText==cnews && eline!=0 && ttloop!=0) {cnews = 0; setTimeout("addNews()",tdelay);} else setTimeout("addChar()",tspeed);} else {setTimeout("addNews()",tdelay)}}doNews()</script></form></div>Código de tu Cbox</div></div><br /><div align="right"><a href="javascript:void(0);" onclick="showHideAT()"><div ><span ></span></div></a></div></div></div><script type="text/javascript">var at = document.getElementById("at");at.style.top = (-200-at.offsetWidth).toString() + "px";</script><a href="javascript:void(0);"onclick="showHideAT()"/><img class="expando" src="URL de la imagen de cbox" alt="PUSH" title="Click"style='position:fixed; top:0; right:50px;'/></a></div></center>

Se sustituye: los códigos de colores (en azul claro) por otros códigos de colores (opcional) y los códigos en azul oscuro por el texto que quieres que diga, el código de tu cbox y la URL de la imagen que dice Cbox, respectivamente.

Créditos: Biblioteca de gatitos, aunque yo lo saqué de Clasic y love.

2. Cbox deslizante con fondo a un lado del blog.

En un gadget HTML/Javascript pegamos lo siguiente:

<style type="text/css">#gb{position:fixed;top:50px;z-index:+1000;}* html #gb{position:relative;}.gbtab{height:400px;width:150px;float:left;cursor:pointer;background:url('URL DE LA IMAGEN QUE DICE CBOX') no-repeat;}.gbcontent{float:left;border:1px solid #F6CEF5;background:#F5F5F5;padding:8px;}</style><script type="text/javascript">function showHideGB(){var gb = document.getElementById("gb");var w = gb.offsetWidth;gb.opened ? moveGB(0, 150-w) : moveGB(170-w, 0);gb.opened = !gb.opened;}function moveGB(x0, xf){var gb = document.getElementById("gb");var dx = Math.abs(x0-xf) > 10 ? 5 : 1;var dir = xf>x0 ? 1 : -1;var x = x0 + dx * dir;gb.style.right = x.toString() + "px";if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}}</script><div id="gb"><div class="gbtab" onclick="showHideGB()"> </div><div class="gbcontent">CÓDIGO DE TU CBOX<div style="text-align:right"><a href="javascript:showHideGB()">[close]</a></div></div></div><script type="text/javascript">var gb = document.getElementById("gb");gb.style.right = (140-gb.offsetWidth).toString() + "px";</script>

Se sustituye: los códigos en azul oscuro por el código de tu Cbox y la imagen que dice Cbox, respectivamente; los códigos en azul claro por códigos de otros colores (opcional) y el código en verde por los píxeles y el tipo de borde.

Créditos: My cute world

Recursos:

Página con códigos de colores {X}

Tipos de borde:

Iconos de Cbox (si los usas dame créditos, son todos míos):

Etiquetas: Blogger, CBox, Recursos, Tutoriales

martes, 5 de marzo de 2013 @ 11:56

1 +

Tutorial Blogger: Cómo poner una imagen en el enlace "Seguir leyendo"

¡Hola! Traigo el primer tuto de este blog. Es el tuto de cómo cambiar el enlace de "Seguir leyendo" por una imagen. También os dejaré unas imágenes para sustituir el enlace por ellas.

Empezamos.