Help - Search - Members - Calendar
Full Version: how doe she and other createblog make these layuts
Forums > Resource Center > Graphics Help > Graphics Help Resolved Topics
thatgirlmarcy
i was wondering is there a code for this type of style Layout i see all the people in createblog having that particular style just different pictures...colors.... like how its the picture and the blue background for the words fall all the way down.. how is that done? i see it everywhere and now i wanna learn how to do that lol... isnt that called a div layout? is there a tutorial? thanks.. i wanna make a kelly clarkson layout but that style ..different colors different picture etc.... ummm erm i hope u guys know what i mean. cuz i know i'm not copying because i see billion of createblogs with that style layout
gigiopolis
There isn't a special code. The banner, blog and profile are all the same, except the banner is left aligned instead of centre. Also, blue for the blog is just one continuous background. I don't know if that made sense. =\
thatgirlmarcy
QUOTE(barelyy_coherent @ Jan 11 2005, 12:10 AM)
There isn't a special code. The banner, blog and profile are all the same, except the banner is left aligned instead of centre. Also, blue  for the blog is just one continuous background. I don't know if that made sense. =\
*



hehe thanks.. i'm still lost LOL i just wanna make an Orlando Bloom one..maybe a blend for the banner and add brushes or something.something neat. but that style like how other createblogers do it.. i saw Xquizit's.. she made a free one like that style.. and a few others... ooo lucky talented people LOL :)
giggl3s
1. make a seperate image as a banner (your orlando bloom thing) and you see how she has the kinda bluish-green bars to seperate her blogs and info? make sure you also have just a little bit of that in your banner so it'll appear seamless
2. make another image as the background using the bars, make sure it lines up with the banner bars though



hope this works
Ewwie
*um i think i know what u meant

like different color blend together right ... _unsure.gif

like this pic?
thatgirlmarcy
QUOTE(Ewwie @ Jan 11 2005, 2:36 AM)
*um i think i know what u meant

like different color blend together right ...  _unsure.gif

like this pic?
*



oo i'm talking about the whole layout in general.. the style of the two long blue backgrounds or erm..ugh i'm bad at explaning.. butoo that picture is very pretty.. that is something i wanna learn how to do. is there a tutorial on that?
whomps
This is the site where I learned how to create this types of layouts. I owe most of my whole design.. uh, "career" to this tutorial.
http://komettails.net/index.php?link=divlayers

You might have to code the DIV differently though, because that tutorial is meant for websites instead of xanga.

<3 that tutorial.
thatgirlmarcy
thanks for the webs ite.. its really cool but erm i'm still confused LOL
Ewwie
oh! i re-read your first post ... i think i know what u meant ... well basically ... just div layer but she didn't set the height for the div layer so it go on and on ... like there's no limit ... and the blue background is just the background :D i hope u get what i meant :(

My old blog" ... i did the same style ... i used absolute div layer but absolute div layer is not working on xanga ... so i don't know anymore >.< btw, my old blog is kinda mess up coz the stupid banner!!! in the way mad.gif


for that picture ... I'll show you how i did that ... because i think it's kinda similiar to the top picture that she did ... i blend alots of colors together while she did only 2 colors - pink and purple ... and those heart, stars, ects... i think it's just brush :D she just brush it in with different colors

*um is it okay to post the tutorial here? ... let me take pic and show u
Ewwie
Here is the tutorial ...



happy.gif sorry ... i kinda mess up the pic when i drew the arrow and stuff hehe ... if i confuse you or u get stuck just let me know ... and i used photoshop 7

NOTE: shifty.gif

step 3: you can change the gradient color to whatever color you like ... just double click on the gradient and select color...

step 4: there are total of 6 colors ... to drag the line ... just hold down your left mouse and drag a line whichever direction you like ... i usually drag it diagonally ... it doesn't matter if you drag outside of the pic pinch.gif the longer you drag ... the less number of color will appear on the pic ... i don't know how to explain this ... just try you'll see ... this is something i learn along the way tongue.gif



step 7: to duplicate layer just right click on the background layer and choose duplicate ... you can also adjust the opacity and fill to your liking after you change the layer mode to screen .... about the gaussian effect ... the more you do the more blurry it gets _smile.gif

---

Result ...

original pic


pic after apply the gradient


I don't know if u can tell the different between these two mode ....

pic with gradient ... and layer mode: color


pic with gradient ... and layer mode: hue


--- that's all! laugh.gif
swe3txprincesz
QUOTE(Ewwie @ Jan 11 2005, 7:09 PM)
Here is the tutorial ...



happy.gif sorry ... i kinda mess up the pic when i drew the arrow and stuff hehe ...  if i confuse you or u get stuck just let me know ... and i used photoshop 7

NOTE:  shifty.gif

step 3: you can change the gradient color to whatever color you like ... just double click on the gradient and select color...

step 4: there are total of 6 colors ... to drag the line ... just hold down your left mouse and drag a line whichever direction you like ... i usually drag it diagonally ... it doesn't matter if you drag outside of the pic  pinch.gif  the longer you drag ... the less number of color will appear on the pic ... i don't know how to explain this ... just try you'll see ... this is something i learn along the way  tongue.gif



step 7: to duplicate layer just right click on the background layer and choose duplicate ... you can also adjust the opacity and fill to your liking after you change the layer mode to screen .... about the gaussian effect ... the more you do the more blurry it gets  _smile.gif

---

Result ...

original pic


pic after apply the gradient


I don't know if u can tell the different between these two mode ....

pic with gradient ... and layer mode: color


pic with gradient ... and layer mode: hue


--- that's all!  laugh.gif
*


umm i dont think you knew this but there was already a tutorial on this in the tutorials section lol you could have just linked that =]
Ewwie
o sorry didn't know >.> ... nvm hehe
thatgirlmarcy
ooooooooo lol thank yiou :) i figured out how to do it :) the layout.. i made a walk to remember layout ft mandy more and shane west :) i found a tutorial on how to code and it took me 3 days... i've been up for 3 days working on it lol havent sleept.. been high on sour skittles and coke a cola :)


ooo i'm confused.. my head hurts LOL ummmm so there is a tutorial just like that? whats the link?
mona lisa
QUOTE(thatgirlmarcy @ Jan 13 2005, 7:49 PM)
ooooooooo lol thank yiou :)  i figured out how to do it :) the layout..  i made a walk to remember layout ft mandy more and shane west :) i found a tutorial on how to code and it took me 3 days... i've been up for 3 days working on it lol havent sleept.. been high on sour skittles and coke a cola :)
ooo i'm confused.. my head hurts LOL ummmm so there is a tutorial just like that? whats the link?
*

which tutorial? you seem to be tlaking about two.
thatgirlmarcy
i found a tutorial online at this web site.. i gotta find it again thou because i forgot to save it and accidently exited out of the page..when i find it i'll post it :)
tiffythepoopoo
coolies! and, actually I don't use "banners" and stuff.. It's alayout with divs. yeah it's pretty complicated, getting everything aligned and all, but I get it done! :D I saw your site and it looks AMAZING! yay. laugh.gif
thatgirlmarcy
QUOTE(tiffythepoopoo @ Jan 15 2005, 3:47 PM)
coolies! and, actually I don't use "banners" and stuff.. It's alayout with divs. yeah it's pretty complicated, getting everything aligned and all, but I get it done! :D I saw your site and it looks AMAZING! yay.  laugh.gif
*


oooooooooo thank you so much :) i luv your site too. the colors rock! hehehe i could never be that creative though LOL maybe someday... :)
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.