I’m the anon who asked for doctor who companions tutorial. sorry you’re not feeling well, please take your time I just hope you’re okay .
Thank you, anon! I truly appreciate that. Also, thank YOU for your patience. I have finally finished the tutorial.
As a reminder, my gifset was inspired by @annelisters absolutely INCREDIBLE creation. I wish they still posted. Their gifsets were AMAZING.
Now that I have finished praising them, let me answer your question on how to create this gif.
For the companions set, depending on which scenes you choose and how much you want to push the color manipulation, this can be a long process, so I will try my best to explain the general principle.
Setting Up the Template
Start off with a black canvas size 540 W x 400 H. Then, use the paint bucket to turn it black (you can either select a black background when creating the canvas or use the paint bucket tool to turn it black).
Either way you choose, you should end up with a canvas like this one.
Now, it's time to add the shapes. Select the shapes icon on the sidebar and choose rectangle.
Create a rectangle, size 121 W x 314 px. Center the rectangle vertically (the top and bottom should be the same distance from the edge) and move it towards the left.
While holding SHIFT, click and drag your cursor over your canvas until you have a square that is 193 W x 193 H. Move your square towards the bottom right. Note: Holding the shift key while using the rectangle tool transforms the shape into a perfect square. If you hold the shift key while use the ellipse tool, it turns the shape into a perfect circle.
Now it's time to create the DOCTOR WHO emblem in the bottom right. Download or copy and paste a black/white TARDIS silhouette. There are plenty online. Just google TARDIS clipart and choose a stock image with a transparent background. You can use the paint brush to remove details you don't need. (If you can't find one with a transparent background, you will need to remove the background yourself in photoshop)
Once you've pasted the TARDIS onto the canvas, create a new layer above it and paint it the color you want your TARDIS to be. This should be around the same color as your gradient/gif. I chose purple for Martha and painted over the TARDIS (in the new layer).
Next, clip that layer to the TARDIS icon to turn it purple. (Ignore the pink paint. I had already merged the Martha layer, so I grabbed this shot from the Rose gif to show the clipping mask in action)
Then, click the shape icon and choose the ellipse tool. At the top left, click the drop-down menu and switch the setting from Shape to Path. Holding the shift key, create a circle (you choose the size).
Click the text icon and hover over the circle path until you see a wavy line. Then click on the path and start typing your preferred text. Since the shape was set to path, the text will curve around its form.
Place your circle text around your TARDIS, and adjust the size if needed.
Congrats! Your template is now done. Now, it's time to gif.
Choosing and Coloring the Gifs
Each gif you choose will need to be cropped to match the shapes' dimensions. So, keep that in mind when selecting scenes. For the narrow rectangle, it is best to grab scenes where the character is relatively still and is far enough away that you can see their shoulder or chest. They can move a little more with the square gif but grab scenes where you can see their chest or waist.
For the square Martha gif, I chose this scene. I believed it would work well with a purple background.
Whichever gif you choose, color it like normal. The lighting in this scene was already fantastic, so I just slapped on a curves layer and used color balance to put the color back in her skin. However, I did leave it slightly more magenta so it could blend in better with purple background.
I also added a Levels: Increase Contrast 1 layer.
Then, I used selective color to push the pink/purple undertones in her clothes, hair and background.
I added a Violet photo filter on top to create a purple wash and removed it from her skin using a mask and brush tool.
Then, I turned on vibrance and set it at 96 to get the final result.
For the 2nd gif, I chose this scene because I wanted to showcase her as a physician.
However, I ran into a problem. The purple gradient dimmed the scene, erasing her features. The same also happened with Clara.
If this occurs with yours, you can either find a new scene strong contrast between light and dark, which is what I did with Rose.
Or you can increase the brightness to combat the darkening effect of the gradient, which is what I did with Martha and Clara.
Fonts
For their names, I used a demo font called Protest. For everything else, including the Doctor Who circle text, I used a font called Kiona. Both set to regular, no bold or italics. To turn the text sideways, I just rotated the text boxes 90 degrees.
Coloring and Inverting the Icons
Next, I grabbed the icons. I just googled "Stethoscope clipart" and find one I liked. Again, make sure the background is transparent. Do better than me. Save yourself time. Duplicate the clipart and move one to the side. You will need it later. for the gradient gif.
Size down one clipart until it's about 60% the height of her name. Position it so it's nestled nicely right beside it. Since mine was not transparent, I created a new layer, painted it purple again, and set it to Screen. Then, I clipped it to the stethoscope.
Now, grab your 2nd clipart and invert, so the background turns black. You use the keyboard shortcut Ctrl + I. Once inverted, set it to screen. It will cause the black background to disappear, leaving only the white stethoscope.
Gif complete. Only thing left to do is sharpen and export. Now, repeat this for all your other characters and you'll be done! :)
P.S. If you want like a more in-depth tutorial on the different tools I used to brighten and manipulate color in scenes, please see this post.
100% tall container and sidebars on desktop / see gif 2 for responsiveness. As always super customizable!
like or reblog if you use (or just if you like!). Don’t take off the credit, but edit as you please. Links and more instructions/specific sizes in the source! Do let me know if something is wrong, I welcome feedback of any kind.
reminder I have a ko-fi if you’d like to support me <3
in this blog you’ll find:
-the soundcloud player button will automatically be the same color as your tags background (because it's small and it looks nicer to have it match). The player is minimal with visible album cover, by shythemes. Also by @shythemes and with @bychloethemes fix, the pxu photosets and the way I styled the like button, lightboxes, and the script for automatic video resizing.
-npf photoset fix and the (optional) searchbar (hidden under the feather) by @glenthemes
and button to copy the url of the post.
-a second source link will appear if the post has a custom source/a source outside of tumblr.
- @magnusthemes' no ‘href.li anymore’ script.
-by @eggdesign (optional) daynight button you can toggle off.
-dropdown menu that appears when you click on the animated link, a floating feather (or whatever image you choose instead of it) will show 5 more navi-links and a link to each custom page you make if you enable 'show link to this page'. As many as you want, you can scroll down the sidebar when they exceed its height.
-Spotify (audio and npf posts) will have a max height that is half the width of your posts instead of a big album art so they won’t become giant (keeping the 80px height to make the album art disappear will remove the list of songs if you post a playlist so I shortened it * see notes in the post linked in the source.
-responsiveness: even 540px posts + padding and containers will fit in the smallest desktop screen (1024px) because sidebars grow slightly smaller than their regular 250px. In all tablets and mobiles you get the sidebars on top and the container below, you can scroll down to see the content and the screen will also scroll if needed. (due to everything being naturally 100% tall and the post-width changing depending on the user I couldn’t have thin posts fit in big tablet or I’d risk cutting off the larger ones). Topsidebar1 will also show as much content in a row as possible.
-lines around titles of posts from css-tricks, optional unnested captions by @annasthms
-lots of instructions in the html if you decide to change something more.
what you can customize without going to the html page:
rest under read more because as always it got long. Please check it out!
for the toggle on and off section:
-turn on and off the visibility of the second sidebar bg if you just want the floating feather (or an image you may upload instead), daynight mode, the searchbar, the searchbar suggestions that appear when you click on it if you don't want to go to the html editor to add the links, unnested captions for textposts and unnested captions for all other posts ( see faq if curious as to why I divided them); the glow around navi links and description. The normal description if turned off will be replaced by one with a "fancy" background that fits this theme. Rounded borders.
for the pick it/upload section:
-pretty much all colors in your 'regular' theme, including each sidebar, the posts container, the posts second container (entries) and the posts background. All images you see except the nightmode button. Including a secondary bg image for your sidebar when they turn into topbars (given the big change of width), see post linked in the source for more instructions.
-if you have enabled daynight button, you can change the color of posts bg, text, entries, backgrounds, bottom permalinks, links, italic, questions, answers. I couldn't add more or I'd surpass the number of allowed meta tags, but it should be enough to allow people to read your posts (if someone can't read white on black text, like me, they can click on the button and have black on white text, or some other combo) If you want to add more you’ll have to go in the html edtior and search body.night for ‘instructions’, it’s pretty easy now that the rest is already written.
select section:
-when it comes to the container behind the posts and each sidebar you can select the blending mode between color and background image, which can be none if you want only one to show fully, or can be hard-light, soft-light, multiply and more, to make the image an overlay and see the result (for example in the preview the sidebar's bg gifs are on multiply or they'd be golden, on top of violet/purple, but in gif 3 you also see the 2nd sidebar on hard-light).
-post width (between 400, 450, 500 and 540 px).
-the font of the posts text among MANY options, including some that wouldn't work well for a post but is there to show you all the potential fonts present in this theme. Why? See below.
text section:
-you can type the following fonts (picking among those shown in the select menu for body font): description, blog title, post title, bottom permalinks, tags
-the size of the gutter/distance between images in photosets, blog title size, post title size, posts font size, description font size
-the symbol in lists items, currently a star or ' \26e6 '. You can replace with other codes or straight up the symbols, there will be a link in the source-link with a page full of other css symbols, remember to add a \ before the code itself.
-the names and urls of navi links (two are under sidebar 1, currently being home and ask, 3 more in the other sidebar)
how can I get my Photoshop settings back if I have to reinstall the program?
Hey y’all ! Did you know that you can save your Photoshop settings to use them after reinstalling your program if you don’t have Creative Cloud or Sync Settings is turned off, or when you're going to install Photoshop on your second computer and want to have the same workspace, custom keyboard shortcuts, styles, actions, etc.?
All you need to do is (before you uninstall the program) find the Photoshop Settings folder, copy it somewhere (e.g. on your Desktop) and then (after reinstallation) paste the folder to the exact same place.
e.g. on my computer: C:\Users\Osvald\AppData\Roaming\Adobe\Adobe Photoshop 2020\Adobe Photoshop 2020 Settings
* If you don’t see the AppData folder in your username folder, it's because usually AppData is hidden. To show it, follow the instruction below.
Windows 10:
In the search box on the taskbar type “Folder”, then select Show hidden files and folders from the search results. Under Advanced settings, select Show hidden files, folders, and drives, and click OK.
Windows 8.1
Swipe in from the right edge of the screen, then select Search (or if you're using a mouse, point to the upper-right corner of the screen, move the mouse pointer down, and then select Search). Type “Folder” in the search box, then select Folder Options from the search results. Select the View tab. Under Advanced settings, select Show hidden files, folders, and drives, and then click OK.
Windows 7
Select the Start button, then select Control Panel > Appearance and Personalization. Select Folder Options, then select the View tab. Under Advanced settings, select Show hidden files, folders, and drives, and then click OK.
* Library is also a hidden folder, so to access it, in the Finder choose Go > Go to Folder. In the Go to Folder dialog box type ~/Library and click Go.
wip page 02 - by @bebewrites
a tabbed wip page code to celebrate 500 600 followers! ♥
preview / code
this code has five tab pages. one for details, characters, additional information/q&a section, links + tags, and a short excerpt. all colors and the font should be changed in the root section near the top of the code.
please let me know if you come across and bugs or have any questions! i’d be happy to answer them:) i’d also appreciate a like/reblog if you use!
