Tutorial Diseño de perfil Chaturbate

CBDesigner · 07-06-2016, 01:34 PM

Hola a todos los miembros y miembras del foro! Soy neck0 (profesionalmente :ugeek Smile

diseñador gráfico, y entre otros diseños, realizo perfiles en Chaturbate y Myfreecams. Os traigo un tutorial para resolver dudas sobre como customizar vuestro perfil CB y seáis las reinas de la página (o casi :mrgreen: ).
Así que empecemos!!
Y Vayamos por partes Big Grin

Añadir iconos social media
Para añadir los iconos social media a la izquierda y en la parte medio-alta como tu Twitter, Tumblr, Manyvids, Amazon.. etc. este es el código que podéis usar, copiando y pegando directamente en vuestra sección About me:

Código:
<p style="position:absolute;top:150px;left:0px;"><a href=“http://www.tuurltumblr.com”><img src=“https://cdn1.iconfinder.com/data/icons/social-media-icon-1/112/tumblr-64.png”></a>

<a href=“http://www.tuurltwitter.com/YourTwitter”><img src=“https://cdn3.iconfinder.com/data/icons/free-social-icons/67/twitter_circle_color-64.png”></a>

<a href=“http://www.tuurlamazon.com”><img src=“https://cdn2.iconfinder.com/data/icons/social-icons-circular-color/512/amazon-64.png”></a>

</p>

Para usar tus urls, sencillamente cambia “http://www.tuurltumblr.com” o “http://www.tuurltwitter.com/YourTwitter” por cada una de tus url a tus perfiles.
La parte de <img src="..." /> es donde va a ir la imagen de la red social para cada url. Para encontrar iconos puedes usar <a class="postlink" href="http://iconfinder.com">http://iconfinder.com</a> , puedes copiar y pegar la dirección de las imágenes que deseas usar desde la misma página.

Añadir icono DMCA
Puedes añadir las etiquetas DMCA, copiando y pegando en las etiquetas que aparecen desde la pagina de <a class="postlink" href="http://dmca.com">http://dmca.com</a>, que es algo como esto:

<a href="http://www.dmca.com/Protection/Status.aspx?ID=8ae8c041-f270-4ff0-88b2-9769fb0f15b2" title="DMCA.com Protection Status" class="dmca-badge"> <img src ="http://images.dmca.com/Badges/dmca_protected_sml_120n.png?ID=8ae8c041-f270-4ff0-88b2-9769fb0f15b2" alt="DMCA.com Protection Status" /></a>

Y lo pegamos en un código como este:

Código:
<p style="position:absolute;top:150px;left:50px;"><a href="http://www.dmca.com/Protection/Status.aspx?ID=8ae8c041-f270-4ff0-88b2-9769fb0f15b2" title="DMCA.com Protection Status" class="dmca-badge"> <img src ="http://images.dmca.com/Badges/dmca_protected_sml_120n.png?ID=8ae8c041-f270-4ff0-88b2-9769fb0f15b2"  alt="DMCA.com Protection Status" /></a>

</p>

De esta forma el icono te quedará un poco más centrado.

Añadir botón Wishlist Amazon
Puedes añadir tu url de lista de deseos de Amazon con un botón para que sea más visible en la sección de Add Wishlists:

Código:
<a href="http://tuurldelistadedeseosamazon"><img src=“http://sonoracatrescue.net/images/permanent/amazon-wishlist.png /></a>

Como antes en la parte de iconos social media, si quieres cambiar el botón cambia la url de <img src="http..."

Añadir información perfil con imagen de fondo
Si no sabes usar Photoshop, (aunque en el fondo no te lo recomiendo para usar en el perfil de CB..), te recomiendo que esta parte la hagas lo más sencilla posible, por ejemplo basándote en un código como este:

Código:
<ul style="background: url('http://images.wallpino.com/001-005/various-collection-hd-wallpapers-677.jpg') 0px 0px/ cover;width:100%"><p style="color:white;padding:200px;">TIPS <br /> RULES</p></ul>

Para añadir una imagen de fondo que quieras, deberás subirla a un hosting de imágenes, como <a class="postlink" href="http://imgur.com">http://imgur.com</a> o <a class="postlink" href="http://tinypic.com">http://tinypic.com</a>. Desde ahí podrás coger tu enlace.
La parte de background url=', es donde va la url de tu imagen de fondo que en nuestro caso es:http://images.wallpino.com/001-005/various-collection-hd-wallpapers-677.jpg . La parte del texto que es donde irá toda tu información como quien eres, tus precios, reglas, etc, etc va entre , en nuestro caso: TIPS RULES

Añadir imagen o color de fondo en tu página
Si quieres darle un toque más personal a tu perfil, muchas modelos lo que hacen es añadir un color o imagen de fondo a la sala, para conseguir más personalización y diferenciación. Para conseguir ese efecto, puedes usar este código:

Código:
<p target="_blank" style="background:url(http://i63.tinypic.com/2exo7xh.jpg);width:2000px;height:2000px;left:0px;top:0px;position:fixed;z-index:-100;" rel="nofollow"></p>

Sustituye la imagen de tinypic por la que tu prefieras.

Ahí os dejo esta guía, creo que es fácilmente entendible, tan solo debes copiar y pegar los códigos que aparecen, y cambiar las url de las imágenes. Si necesitáis alguna customización especial podéis enviarme un mensaje privado y cualquier duda que tengáis respecto a estos códigos que os he puesto me la podéis consultar. He de decir que no dispongo de mucho tiempo para entrar al foro por lo que si tenéis alguna petición o necesitáis algo me podéis enviar un correo a neck0.designs @ gmail.com .

Saludos!!!! (ok)

Último(s) agradecimiento(s)

Nami,

Mia Snow,

gabylol,

thegold,

cleopatra,

Arlin,

amatista,

Gabrielaaa,

diegopinzon,
Ver todos

Sarah · 07-07-2016, 06:55 PM

1

(aplauso) (aplauso) (aplauso)
Infinitas graciasssss neck, hace mucho estaba buscando este tipo de informacion clara y precisa! Gracias por compartir esto con nosotros se que a mas de uno(a) nos sera muy util. Gracias!! (beso)

Último(s) agradecimiento(s)

Latinmodelco,
Ver todos

davidboss · 07-09-2016, 09:11 AM

0

como puedo añadir a la izquierda de la cam un icono de SIGN UP para motivar a los clientes nuevos a registrarse???
lo he visto en algunas cams y es buena idea ya que la cam es lo primero que se ve.

CBDesigner · 07-09-2016, 02:37 PM

1

davidboss escribió:como puedo añadir a la izquierda de la cam un icono de SIGN UP para motivar a los clientes nuevos a registrarse???
lo he visto en algunas cams y es buena idea ya que la cam es lo primero que se ve.

Puedes añadirlo justo en la parte de los iconos social media,y sustituir tanto la url como la imagen del botón de abajo : https://cdn1.iconfinder.com/data/icons/social-media-icon-1/112/tumblr-64.png poner tu image, y poner tu url de registro de chaturbate donde corresponde:

Código:
<p style="position:absolute;top:150px;left:0px;"><a href=“http://www.tuurlchaturbateregistro.com”><img src=“https://cdn1.iconfinder.com/data/icons/social-media-icon-1/112/tumblr-64.png”></a></p>

No te puedo decir donde encontrar un butón de Sign up Here ahora mismo, los he visto en algunos perfiles pero son totalmente customizados. Si me dices el perfil donde has visto el botón te envío el código de la imagen.

Último(s) agradecimiento(s)

Kenchu,
Ver todos

davidboss · 07-09-2016, 02:39 PM

0

Gracias, ya encontré la forma de hacerlo, esta quedando chula la página

Pusheen · 07-16-2016, 04:31 AM

0

muchas gracias!! ♥ estaba buscando como hacerlo!♥

Necesitas fotos o vídeos para vender en páginas como Chaturbate y MYFREECAMS SHARE? Escríbeme! Tengo 4 años de experiencia trabajando con fotografía erótica, super discreta y lo mejor, con la total confianza de ser una modelo webcam también Smile

lina_72 · 07-16-2016, 12:22 PM

0

Siiiiii mil gracias por compartir esta información tan valiosa.

gabrielapple · 07-17-2016, 02:21 PM

0

Llevo dos años buscando ésta información!! Mil gracias por compartirla con nosotros!!! Bendiciones Big Grin

(K) (K) (K) (K) (K) (K) (K) (K) (K) (K) (K) (K) (K) (K) (K) (K) (aplauso) (aplauso) (aplauso) (aplauso) (aplauso) (aplauso) (aplauso) (aplauso) (aplauso) (aplauso) (aplauso) (aplauso) (aplauso) (aplauso) (aplauso) (aplauso) (aplauso) (aplauso) (aplauso) (aplauso) (aplauso) (aplauso) (aplauso) (aplauso) (aplauso) (aplauso) (aplauso) (aplauso) (aplauso) (aplauso)

Gabrielapple
[img] [Imagen: 0UyMcAR.jpg]

[/img]

gabrielapple · 07-17-2016, 04:13 PM

0

CBDesigner escribió:Hola a todos los miembros y miembras del foro! Soy neck0 (profesionalmente :ugeek diseñador gráfico, y entre otros diseños, realizo perfiles en Chaturbate y Myfreecams. Os traigo un tutorial para resolver dudas sobre como customizar vuestro perfil CB y seáis las reinas de la página (o casi :mrgreen: ).
Así que empecemos!!
Y Vayamos por partes

Añadir iconos social media
Para añadir los iconos social media a la izquierda y en la parte medio-alta como tu Twitter, Tumblr, Manyvids, Amazon.. etc. este es el código que podéis usar, copiando y pegando directamente en vuestra sección About me:

Código:
<a href=“http://www.tuurltumblr.com”><img src=“https://cdn1.iconfinder.com/data/icons/social-media-icon-1/112/tumblr-64.png”></a> <a href=“http://www.tuurltwitter.com/YourTwitter”><img src=“https://cdn3.iconfinder.com/data/icons/free-social-icons/67/twitter_circle_color-64.png”></a> <a href=“http://www.tuurlamazon.com”><img src=“https://cdn2.iconfinder.com/data/icons/social-icons-circular-color/512/amazon-64.png”></a> 
Para usar tus urls, sencillamente cambia “http://www.tuurltumblr.com” o “http://www.tuurltwitter.com/YourTwitter” por cada una de tus url a tus perfiles.
La parte de <img src="..." /> es donde va a ir la imagen de la red social para cada url. Para encontrar iconos puedes usar <a class="postlink" href="http://iconfinder.com">http://iconfinder.com</a> , puedes copiar y pegar la dirección de las imágenes que deseas usar desde la misma página.

Añadir icono DMCA
Puedes añadir las etiquetas DMCA, copiando y pegando en las etiquetas que aparecen desde la pagina de <a class="postlink" href="http://dmca.com">http://dmca.com</a>, que es algo como esto:

<a href="http://www.dmca.com/Protection/Status.aspx?ID=8ae8c041-f270-4ff0-88b2-9769fb0f15b2" title="DMCA.com Protection Status" class="dmca-badge"> <img src ="http://images.dmca.com/Badges/dmca_protected_sml_120n.png?ID=8ae8c041-f270-4ff0-88b2-9769fb0f15b2" alt="DMCA.com Protection Status" /></a>

Y lo pegamos en un código como este:

Código:
<a href="http://www.dmca.com/Protection/Status.aspx?ID=8ae8c041-f270-4ff0-88b2-9769fb0f15b2" title="DMCA.com Protection Status" class="dmca-badge"> <img src ="http://images.dmca.com/Badges/dmca_protected_sml_120n.png?ID=8ae8c041-f270-4ff0-88b2-9769fb0f15b2" alt="DMCA.com Protection Status" /></a> 
De esta forma el icono te quedará un poco más centrado.

Añadir botón Wishlist Amazon
Puedes añadir tu url de lista de deseos de Amazon con un botón para que sea más visible en la sección de Add Wishlists:

Código:
<a href="http://tuurldelistadedeseosamazon"><img src=“http://sonoracatrescue.net/images/permanent/amazon-wishlist.png /></a>
Como antes en la parte de iconos social media, si quieres cambiar el botón cambia la url de <img src="http..."

Añadir información perfil con imagen de fondo
Si no sabes usar Photoshop, (aunque en el fondo no te lo recomiendo para usar en el perfil de CB..), te recomiendo que esta parte la hagas lo más sencilla posible, por ejemplo basándote en un código como este:

Código:
<ul style="background: url('http://images.wallpino.com/001-005/various-collection-hd-wallpapers-677.jpg') 0px 0px/ cover;width:100%">TIPS RULES</ul>
Para añadir una imagen de fondo que quieras, deberás subirla a un hosting de imágenes, como <a class="postlink" href="http://imgur.com">http://imgur.com</a> o <a class="postlink" href="http://tinypic.com">http://tinypic.com</a>. Desde ahí podrás coger tu enlace.
La parte de background url=', es donde va la url de tu imagen de fondo que en nuestro caso es:http://images.wallpino.com/001-005/various-collection-hd-wallpapers-677.jpg . La parte del texto que es donde irá toda tu información como quien eres, tus precios, reglas, etc, etc va entre , en nuestro caso: TIPS RULES

Añadir imagen o color de fondo en tu página
Si quieres darle un toque más personal a tu perfil, muchas modelos lo que hacen es añadir un color o imagen de fondo a la sala, para conseguir más personalización y diferenciación. Para conseguir ese efecto, puedes usar este código:

Código:

Sustituye la imagen de tinypic por la que tu prefieras.

Ahí os dejo esta guía, creo que es fácilmente entendible, tan solo debes copiar y pegar los códigos que aparecen, y cambiar las url de las imágenes. Si necesitáis alguna customización especial podéis enviarme un mensaje privado y cualquier duda que tengáis respecto a estos códigos que os he puesto me la podéis consultar. He de decir que no dispongo de mucho tiempo para entrar al foro por lo que si tenéis alguna petición o necesitáis algo me podéis enviar un correo a neck0.designs @ gmail.com .

Saludos!!!! (ok)

Hola, he seguido cada uno de los pasos que pones... todo bien, pero quisiera que los logos de las redes sociales se movieran mientras yo voy bajando el perfil, que no se queden fijos donde los ubiqué... me puedes dar una instrucción con ésto?
Mil gracias...

Gabrielapple
[img] [Imagen: 0UyMcAR.jpg]

[/img]

rompesuelos · 07-22-2016, 11:52 AM

0

Hola!!
Quisiera saber si pongo mi wishlist de Amazon queda patente mi dirección?? Los que me hagan algun regalo pueden saber entonces donde vivo? Es seguro ponerla?
Gracias!!!

lindadulce · 07-31-2016, 05:18 PM

0

rompesuelos escribió:Hola!!
Quisiera saber si pongo mi wishlist de Amazon queda patente mi dirección?? Los que me hagan algun regalo pueden saber entonces donde vivo? Es seguro ponerla?
Gracias!!!

en amazon configura bien tu seguridad, es q con solo el link de tu lista de deseos es suficiente y al miembro no le aparece ninguna info personal tuya

lindadulce · 07-31-2016, 05:21 PM

0

rompesuelos escribió:Hola!!
Quisiera saber si pongo mi wishlist de Amazon queda patente mi dirección?? Los que me hagan algun regalo pueden saber entonces donde vivo? Es seguro ponerla?
Gracias!!!

en amazon configura bien tu seguridad, es q con solo el link de tu lista de deseos es suficiente y al miembro no le aparece ninguna info personal tuya

CBDesigner · 09-11-2016, 07:04 PM

0

gabrielapple escribió:Hola, he seguido cada uno de los pasos que pones... todo bien, pero quisiera que los logos de las redes sociales se movieran mientras yo voy bajando el perfil, que no se queden fijos donde los ubiqué... me puedes dar una instrucción con ésto?
Mil gracias...

cambia position:absolute, por position:fixed

Saludos

sacasta89 · 09-22-2016, 02:21 AM

0

Quisiera saber, como hacer para que el perfil quede de esta manera, que la imagen de fondo quede dentro de la descripcion y no solamente por fuera enmarcada como el siguiente perfil <a class="postlink" href="https://es.chaturbate.com/samywatson/">https://es.chaturbate.com/samywatson/</a> muchas gracias CBDESIGNER por cualquier colaboracion y qeudo al pendiente

juanzear · 09-22-2016, 03:25 PM

0

Hola yo te pedo colaborar

sacasta89 · 09-23-2016, 07:01 PM

0

juanzear escribió:Hola yo te pedo colaborar

hola Juanzear, sabes cual es el codigo preciso para esto, o como se hace para poder poner un fondo asi, que este tanto por fuera del marco de la biografia normalmente, pero como en el caso anterior sea una foto que sirva de fondo para las demas banners de biografia, menutips, fotos y demas ? muchas gracias

juanzear · 09-23-2016, 07:04 PM

0

HOLA NO PUEDO VER EL PERFIL EN EL LINK QUE DAS SI ENVIAS UNA CAPTURA DE PANTALLA ME PUEDO HACER UNA IDEA POR QUE NO SE QUE QUIERES EXACTAMENTE

sacasta89 · 09-23-2016, 10:28 PM

0

juanzear escribió:HOLA NO PUEDO VER EL PERFIL EN EL LINK QUE DAS SI ENVIAS UNA CAPTURA DE PANTALLA ME PUEDO HACER UNA IDEA POR QUE NO SE QUE QUIERES EXACTAMENTE

ahi adjunto dos imagenes nose si las puedas o no ver, pero pues es mas o menos lo que quisiera, se ve la imagen de fondo en la parte de descripcion, pero encima de la foto estan las imagenes de menu tips las rules y todo lo demas, qeu al ir bajando la imagen, el fondo se queda quieta y va pasando los otros banners

juanzear · 09-27-2016, 01:38 AM

0

hola si es sencillo pon el siguiente codigo

<a class="postlink" href="http://TU">http://TU</a> FOTO.jpg);width:ANCHO DE LA IMAGEN px ;height:ALTO DE LA IMAGEN px;left:0px; top:0px; position:fixed; z-index:-100;" rel="nofollow">

LO QUE HACE QUE LA IMAGEN SE QUEDE QUIETA Y AL FONDO ES: position:fixed; z-index:-1;

juanzear · 09-27-2016, 04:31 PM

1

Mi colaboración para dejar un fondo estatico iguala hay que ajustar segun el contenido

bueno les dejo mi perfil como ejemplo en [url]chaturbate <a class="postlink" href="https://es.chaturbate.com/p/juanzear/?tab=bio">https://es.chaturbate.com/p/juanzear/?tab=bio</a>[/url]

si gustan dejar su perfil asi con gusto les colaboro les dejo el codigo para que lo implementen el resto es buen gusto, diseño y fotos

<ul style="background-image:url(<a class="postlink" href="http://TUFOTO.jpg">http://TUFOTO.jpg</a>); background-repeat:no-repeat; background-size: cover;
background-position:center; background-attachment:fixed; list-style:none; overflow:hidden; margin-left:-100px; margin-top:50px; ">

<li style="margin-left:400px;"><img src="http://TUFOTO.jpg" width="900" height="719" alt=""/></li>
<li style="margin-left:400px;"><img src="http://TUFOTO.jpg" width="900" height="719" alt=""/></li>
<li style="margin-left:400px;"><img src="http://TUFOTO.jpg" width="900" height="719" alt=""/></li>

EXPLICO UN POCO EL CÓDIGO DE LA PRIMERA LINEA:

<ul>es un tipo de lista donde ordenamos los elementos que lleva dentro
background-repeat:no-repeat; este código es para que la imagen de fondo no se repita sino que sea una sola imagen
background-size: cover; este código es para que la imagen ocupe toda la pantalla o el contenido del Iframe
background-position:center; con este código ubicamos la imagen de fondo en el centro (esto puede variar según la foto)
background-attachment:fixed; con este código hacemos que la imagen quede fija en el fondo así que cuando usamos el scroll bajan las imágenes pero el fondo queda fijo
list-style:none; al usar una lista en HTML se crean unos puntos esto los quita
overflow:hidden; este codigo nos evita que la imagen se desborde a lo ancho de la pagina
margin-left:-100px; use margen a la izquierda -100px para que ocupara la mayor área posible del bio
margin-top:50px; use margen de 50px para que no tapara los elementos que trae la pagina o el menu superior

<li style="margin-left:400px;"> en las imagenes puse margin 400px para centrarlas un poco en la pantalla (no se como se vea en portátiles si se corta la imagen si alguien me dice gracias)

por ultimo si quieren editar su perfil de forma estetica y elegante pueden escribirme

espero les guste y les sirva

Último(s) agradecimiento(s)

studios sajar,
Ver todos