![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png){kind=small}
morgynleriIt's writing. It's not fic, it's not story, but it's writing. *crosses arms stubbornly*
![[livejournal.com profile]](https://www.dreamwidth.org/img/external/lj-userinfo.gif)
twistdfateangel asked me how to make a mock-up for an LJ profile. I, perhaps foolishly, decided to do a tutorial for her sake. The Master's was too far along to go back and get all the screen caps I needed to make his the tutorial. Perhaps a good thing, too, since he's a bloody insane Time Lord. With a penchant for explosives (my muse, at least, has a penchant for explosives when dealing with the world in general, and I'm hoping it doesn't make things too silly with the writing of Time, Chaos, and the Universal Constant... and I'm getting off topic, anyway...).
So, I'm doing a tutorial complete with images and snarky commentary as I work on Jack's LJ profile mock-up. And the longer I work on this, the snarkier I'm getting. And the same with the muse.
Anyway.
The first part of the tutorial, for those who are interested. If you want to skip to the images, feel free to click though the gallery (images are in order), and beware you're missing some of the snark. Not a huge amount in the first bit, but once we get to tabs... yeah, I started putting a leash on the Master then. Oh, and as I'm posting, more snark is getting added, so...
*stops rambling*
On with the show! (Warning, you have to click through on each image to get the full size... I didn't want to take up massive amounts of bandwidth with the full-sized images. And I'm not letting Mr. Bastard Called Master by the Snarky Git and Time-Traveling Twit dictate otherwise. Really. Not listening to Nine or Jack either.)
To make a mock-up LJ profile
First, make a screen cap of your own LJ profile, and the browser window it is in. Not all the fun is in just in the profile, after all, but what else the character would have in the background. (To which the Master would like to add that he's not obsessed with smashing Microsoft into little bitty pieces, no matter what Jack says. Jack says he's raving again, and ignore him while they medicate him.)
I am using Firefox, on a Mac computer, and so the original screen cap looks like so:
original_capture
Paste this into a new window in Adobe Photoshop. Mine, once I copied the screep cap from Grab (my capping program), automatically started with the dimensions needed to fit the cap.
Step 1: The Browser Shell
First, select the bits that belong to the browser itself, not the profile, and paste them in a new layer (in this case, labeled "Firefox Shell").
step1_img1
Next, you have to blank out the information you want to replace: the tab titles, the page title, the bookmark folders, and the url in the navigation bar. (More or less... depends on what your browser has, and what platform you're running, at least, as far as I know.)
1a: Title Bar
We'll start with the title of the page, since that's a constant, and easiest to clear out. Zoom in on the title, and using a rectangular marquee, make sure you get all of it, but don't get below the title bar. Move the selection to a blank segment of the title bar, copy and paste the segment, and drag it over to cover the title.
I usually do the new title right away, and make sure to line it up with where the old title was. For this, create a new text layer, put in the new title, and align it with the old title. Bottom edge should be where the bottom edge of the old text was, especially.
Reinstate the layer with the masking segment, and you're ready to move on.
step1a
1b: Navigation Bar
The navigation bar is pretty much as easy to clear out and replace as the title bar. Maybe easier, come to think. Anyway. Back to tutorial.
Select the url, make sure you're in the layer with the mask for the title in the title bar, and using the brush tool, paint the selected area white. Type in your new url, make sure it's lined up with the bottom and left edges of your previous url, and you're ready to move on.
step1b
1c: Tabs
Tabs are the trickiest part of covering things up, but I'm doing them now because I have something in mind for the three that I have to do for this, and am not as certain on Jack's bookmarks (other than babysitting an evil genius and possibly porn, anyway).
Part of doing tabs is deciding what you want to have capped the character in the process of doing. Such as, in the case of Jack, checking up on the Master's latest desire to kill someone/blow something up (Microsoft, beware!), and uploading some pictures to photobucket, along with the cap of his LJ profile.
So, we'll start with the left-most tab, and work from there.
In this case, we want to keep the little LJ pencil icon, so we won't have to cover that up, just the title of the tab. And since it isn't the active tab, we can't just take the nice comfy amount of blank space that's in the active tab and use it.
Zoom in to about 500-600%, and select the six pixel wide swath between the final dot and the little circle with an "x" in it, from the white line of pixels at the top of the tab to the line a shade darker grey at the bottom. Copy and paste this in a new layer, and duplicate that layer three times. Move the layers so that they're all edge-to-edge, and then merge them together. Duplicate this layer, and move each duplicate over to the left until you have enough to cover the whole title, but aren't covering up the LJ icon. It's ok if some of the duplicated layers overlap.
Merge those together, and duplicate it one last time, to use to cover up the title on the other non-active tab.
Do the same thing you did with the first tab with the active tab - though in this case, there's more to work with, and fewer duplications to cover the whole title. Once you have those all done, merge them together with the other masking layer. Now you're ready to type titles for the tabs.
Make sure to line up the new titles with the left and bottom edges of the old titles, and use ellipses if the new title is too long to fit in the tab. Bring the masking layer back up, and you're ready to deal with the bookmarks bar.
step1c_img1
step1c_img2
step1c_img3
1d: Bookmarks Bar
Last item to do for the browser shell. Hide the current bookmarks, and make a whole new set. In making the folders of bookmarks, think about what would be amusing and appropriate for the character. In Jack's case.... "Time Lords" (are all insane), "Torchwood" ("Why does the smug bastard have to send Ianto to Glasgow?"), "Friends" (lots), "Lovers" (not as many, but as varied), "Places to Go" (before the Master "accidentally" blows them up), and "Entertainment" (movies, music and TV, get your mind out of the gutter!).
We begin by copying the little icon next to the second folder, and the pixels between it and the titles left and right of it. Duplicate that as many times as needed for the planned number of bookmark folders (5 for Jack). Also, copy the icon for the first folder, and the pixels between it and its title, and leave that right on top of the original. Then, copy a large segment of blank space from the right-hand side of the bookmarks bar, and duplicate as many times as needed to cover up all of the ones currently in existance.
For putting in new ones, it's easiest to hide all the layers other than the copied icons, and the text layers for these titles as you make them. Do the titles in the order you want them, and line them up with the duplicated icons until you have it set up like the bookmarks bar before you covered it all up. Make sure the bottom edges are all aligned with the bottom edges of the previous bookmark set, as well.
Bring up the rest of the layers, and you're ready to finish up the browser shell.
step1d_img1
step1d_img2
step1d_img3
step1d_img4
1e: Link and Merge Layers
Last thing before we go on to the next step. Link all the layers that make up the new browser shell, and merge them together into the layer that is "Firefox Shell". You're now ready to work on the actual web content of the mock-up.
step1_img2
Notes
Check what fonts your browser uses when you're replacing text. Part of making the image look it's best is matching the fonts used, including the anti-aliasing computers use for fonts above a certain size (dependent on the settings of your computer).
Depending on the browser, you may or may not use all the sub-steps in this segment. And unless you're doing a whole tutorial, I'd expect it to take you a lot less time than it did for me to make this browser shell. Should take about an hour to do it, if you have the titles and such planned out. If you have as much to do as I did for this. Less if you don't have tabs and/or a bookmarks bar.
End Step 1
And now, on this, my day off, it's time for bed. I have to get up and get to the bank tomorrow before it closes... and my credit union's local branch is an hour away.
Enjoy the first part of the tutorial, the rest shall happen over the rest of the week as I get it done. And much snarkiness, I'm sure, shall ensue.
Also, if anyone actually is using this for the purpose it's meant to be made for... well done. You're doing better than I am right now. *takes her silly, snarky self off to bed, and tells the muses they can wait until after the bank run tomorrow*
twistdfateangel asked me how to make a mock-up for an LJ profile. I, perhaps foolishly, decided to do a tutorial for her sake. The Master's was too far along to go back and get all the screen caps I needed to make his the tutorial. Perhaps a good thing, too, since he's a bloody insane Time Lord. With a penchant for explosives (my muse, at least, has a penchant for explosives when dealing with the world in general, and I'm hoping it doesn't make things too silly with the writing of Time, Chaos, and the Universal Constant... and I'm getting off topic, anyway...).So, I'm doing a tutorial complete with images and snarky commentary as I work on Jack's LJ profile mock-up. And the longer I work on this, the snarkier I'm getting. And the same with the muse.
Anyway.
The first part of the tutorial, for those who are interested. If you want to skip to the images, feel free to click though the gallery (images are in order), and beware you're missing some of the snark. Not a huge amount in the first bit, but once we get to tabs... yeah, I started putting a leash on the Master then. Oh, and as I'm posting, more snark is getting added, so...
*stops rambling*
On with the show! (Warning, you have to click through on each image to get the full size... I didn't want to take up massive amounts of bandwidth with the full-sized images. And I'm not letting Mr. Bastard Called Master by the Snarky Git and Time-Traveling Twit dictate otherwise. Really. Not listening to Nine or Jack either.)
First, make a screen cap of your own LJ profile, and the browser window it is in. Not all the fun is in just in the profile, after all, but what else the character would have in the background. (To which the Master would like to add that he's not obsessed with smashing Microsoft into little bitty pieces, no matter what Jack says. Jack says he's raving again, and ignore him while they medicate him.)
I am using Firefox, on a Mac computer, and so the original screen cap looks like so:
original_capture
Paste this into a new window in Adobe Photoshop. Mine, once I copied the screep cap from Grab (my capping program), automatically started with the dimensions needed to fit the cap.
First, select the bits that belong to the browser itself, not the profile, and paste them in a new layer (in this case, labeled "Firefox Shell").
step1_img1
Next, you have to blank out the information you want to replace: the tab titles, the page title, the bookmark folders, and the url in the navigation bar. (More or less... depends on what your browser has, and what platform you're running, at least, as far as I know.)
We'll start with the title of the page, since that's a constant, and easiest to clear out. Zoom in on the title, and using a rectangular marquee, make sure you get all of it, but don't get below the title bar. Move the selection to a blank segment of the title bar, copy and paste the segment, and drag it over to cover the title.
I usually do the new title right away, and make sure to line it up with where the old title was. For this, create a new text layer, put in the new title, and align it with the old title. Bottom edge should be where the bottom edge of the old text was, especially.
Reinstate the layer with the masking segment, and you're ready to move on.
step1a
The navigation bar is pretty much as easy to clear out and replace as the title bar. Maybe easier, come to think. Anyway. Back to tutorial.
Select the url, make sure you're in the layer with the mask for the title in the title bar, and using the brush tool, paint the selected area white. Type in your new url, make sure it's lined up with the bottom and left edges of your previous url, and you're ready to move on.
step1b
Tabs are the trickiest part of covering things up, but I'm doing them now because I have something in mind for the three that I have to do for this, and am not as certain on Jack's bookmarks (other than babysitting an evil genius and possibly porn, anyway).
Part of doing tabs is deciding what you want to have capped the character in the process of doing. Such as, in the case of Jack, checking up on the Master's latest desire to kill someone/blow something up (Microsoft, beware!), and uploading some pictures to photobucket, along with the cap of his LJ profile.
So, we'll start with the left-most tab, and work from there.
In this case, we want to keep the little LJ pencil icon, so we won't have to cover that up, just the title of the tab. And since it isn't the active tab, we can't just take the nice comfy amount of blank space that's in the active tab and use it.
Zoom in to about 500-600%, and select the six pixel wide swath between the final dot and the little circle with an "x" in it, from the white line of pixels at the top of the tab to the line a shade darker grey at the bottom. Copy and paste this in a new layer, and duplicate that layer three times. Move the layers so that they're all edge-to-edge, and then merge them together. Duplicate this layer, and move each duplicate over to the left until you have enough to cover the whole title, but aren't covering up the LJ icon. It's ok if some of the duplicated layers overlap.
Merge those together, and duplicate it one last time, to use to cover up the title on the other non-active tab.
Do the same thing you did with the first tab with the active tab - though in this case, there's more to work with, and fewer duplications to cover the whole title. Once you have those all done, merge them together with the other masking layer. Now you're ready to type titles for the tabs.
Make sure to line up the new titles with the left and bottom edges of the old titles, and use ellipses if the new title is too long to fit in the tab. Bring the masking layer back up, and you're ready to deal with the bookmarks bar.
step1c_img1
step1c_img2
step1c_img3
Last item to do for the browser shell. Hide the current bookmarks, and make a whole new set. In making the folders of bookmarks, think about what would be amusing and appropriate for the character. In Jack's case.... "Time Lords" (are all insane), "Torchwood" ("Why does the smug bastard have to send Ianto to Glasgow?"), "Friends" (lots), "Lovers" (not as many, but as varied), "Places to Go" (before the Master "accidentally" blows them up), and "Entertainment" (movies, music and TV, get your mind out of the gutter!).
We begin by copying the little icon next to the second folder, and the pixels between it and the titles left and right of it. Duplicate that as many times as needed for the planned number of bookmark folders (5 for Jack). Also, copy the icon for the first folder, and the pixels between it and its title, and leave that right on top of the original. Then, copy a large segment of blank space from the right-hand side of the bookmarks bar, and duplicate as many times as needed to cover up all of the ones currently in existance.
For putting in new ones, it's easiest to hide all the layers other than the copied icons, and the text layers for these titles as you make them. Do the titles in the order you want them, and line them up with the duplicated icons until you have it set up like the bookmarks bar before you covered it all up. Make sure the bottom edges are all aligned with the bottom edges of the previous bookmark set, as well.
Bring up the rest of the layers, and you're ready to finish up the browser shell.
step1d_img1
step1d_img2
step1d_img3
step1d_img4
Last thing before we go on to the next step. Link all the layers that make up the new browser shell, and merge them together into the layer that is "Firefox Shell". You're now ready to work on the actual web content of the mock-up.
step1_img2
Check what fonts your browser uses when you're replacing text. Part of making the image look it's best is matching the fonts used, including the anti-aliasing computers use for fonts above a certain size (dependent on the settings of your computer).
Depending on the browser, you may or may not use all the sub-steps in this segment. And unless you're doing a whole tutorial, I'd expect it to take you a lot less time than it did for me to make this browser shell. Should take about an hour to do it, if you have the titles and such planned out. If you have as much to do as I did for this. Less if you don't have tabs and/or a bookmarks bar.
And now, on this, my day off, it's time for bed. I have to get up and get to the bank tomorrow before it closes... and my credit union's local branch is an hour away.
Enjoy the first part of the tutorial, the rest shall happen over the rest of the week as I get it done. And much snarkiness, I'm sure, shall ensue.
Also, if anyone actually is using this for the purpose it's meant to be made for... well done. You're doing better than I am right now. *takes her silly, snarky self off to bed, and tells the muses they can wait until after the bank run tomorrow*