#used only the round brush with little to no opacity settings so i could just use the flat colours
Explore tagged Tumblr posts
blu3berrydraws · 2 years ago
Text
Tumblr media
--- Anon requested: Days go by and nauseous for zukka. From this palette meme.
455 notes · View notes
itsmangacap · 1 year ago
Text
Tumblr media
A manga caps cleaning tutorial. requested by @noctemys
Program: photoshop cc2019 but could work on any older or newer versions.
i’ve been working on this and a hard time choosing which cap should i work on, i decided to write it using an easy one to work on and writing the tutorial on, but you could work this one even in more challanging caps to clean! i’ll show examples of different difficulty at the end of this tutorial. i’m still a work on a process when it comes to cleaning caps!
*tip: always try to use a high quality files! i personally like to work on the official files if they’re available. they make a huge difference as seen between this old and newcleaned cap!
step.1 first step is choosing a cap of your choice and crop the panel that you like. mine is from Special A by minami maki.
Tumblr media
step.2 zoom in the cap, i usually go with x800! then using the lasso tool i select all the area i would like to erase and clean! this step could take a long time with some caps that have overlaying background effect with the characters. you could also use the pen tool or the magnet tool, whichever feel more comfortable using.
Tumblr media
step.3 once you finish selecting the whole area you want to clean, with a white color fill the layer with white color!
Tumblr media
step.4 some caps do need to up the contrast in them just like this one, i usually use the levels to increase the blacks and whites by ticking the black point to the left to increase the blackness and the white to the right until i like the result i get. for this one as it leans more to the grey than black i only needed to increase the blackness.
Tumblr media Tumblr media
step.5 some caps aren’t truly in black/white so i just add a gradient black and white!
Tumblr media Tumblr media
step.6 add a new colorfill layer and fill it with #f1f1f1 and set it to multiply. and delete the mask!!!
Tumblr media
step.7 this step could be the last step or will need an extra step to make. and in this case we’ll need the extra step use magic wand tool select the background that i just cleaned you’ll notice the selection will include parts of both hikari’s hair and kei’s face.
Tumblr media
step.8 after deselecting, with a round brush with a grey shade color - my choice is shade is #373737 -, i would zoom in the cap again and notice where the gaps that’s causing the selecting mess is. and while in the cap layers i would redraw those tiny parts… sometimes the gaps are big and there’ll be many gaps.. you could either redraw by the mouse directly if the missing parts are small and tiny or use the pen tool to do that!
Tumblr media
step.9 using the magic wand again select the area you want and select the colorfill layer click the mask icon from the layers box and you’re all set!
Tumblr media
step.9 - optional- a last step i’ve been adding lately to my manga caps edits is adding this texture at the top of layers and lowering its opacity to 8% for a nice little touch!
Tumblr media Tumblr media
the final layer box will look like this.
other cleaned caps before and after: before→ after | before → after | before→ after| before → after
you could add any background you like at the end for a different ending result
Tumblr media
29 notes · View notes
nataliescatorccio · 5 years ago
Text
becca’s mega coloring tutorial
i’ve gotten a lot of requests recently asking me to make a tutorial for my 'colorporn’ gifsets, and i think i’ve finally gotten over the traumatic incident 3 years ago, when i spent all day writing out a coloring tutorial only to accidentally hit backspace causing the entire thing to be wiped. so, here it is, buckle up folks! it’s going to be a long ride but here’s hoping it’ll be helpful.
so we’ll be going from left side (no coloring) to right (coloring & color porn):
Tumblr media
let’s get started! you will need some sort of photoshop in order to do this, i use photoshop cs5 so this tutorial will be based around that, but i imagine you can adapt it for whichever one you use.
this is more of a coloring tutorial than a gif tutorial, but if you’re not sure how to make gifs then this is a pretty good all-encompassing tutorial, although i use 0.05 as my frame delay speed.
we’ll start from your have your basic gif, re-sized cropped and sharpened like so:
Tumblr media
step one: curves
so i’m going to start off with basic colouring! the first thing i’m going to do is a curves layer to sort of ‘balance’ the gif out. to do that i go to layers > new adjustment layer > curves. on this window, right next to the graph, are three little droppers. i’m going to click the very bottom one right here: 
Tumblr media
this basically allows you to set your ‘whitest’ point in the gif, aka the point that should be the brightest. so i then go to my gif and click on the ‘lightest’ point. there’s a lot of light coming in from the top left hand corner of the scene i’ve chosen, so i’m just going to click it on that point (circled below) and that immediately brightens up the scene.
Tumblr media
next i’m do something similar, but with the ‘blackest’ or darkest point on the gif. to do that i’m going to use the very top color picker:
Tumblr media
and i’m then going to hit what the blackest point to balance out the light:
Tumblr media
what this is basically doing is using your white and black points as color markers to not only brighten and darken the gif in places, but it also acts as a sort of color balancer. it’s very common that shows put a sort of colored ‘filter’ over their scenes, for example the scene i’ve picked has a sort of yellowish filter over the top. you might find that some scenes it doesn’t really affect, but others it makes a tremendous difference. personally i like doing this to get back to a ‘neutral’ ground on the scene, which is particularly useful when we are taking a scene with a warmer color tone (yellow) and trying to make it a cooler tone (purple).
if you are using a darker scene you may have to put a brightness/contrast layer on before you can complete this step, or even add an auto curves layer (hit the ‘auto' button on that same window) before you have a ‘white�� and ‘black’ spot to work on. i love this trick but this is precisely why i say i have no ‘general psd’ because it is entirely scene specific! but here we are at the end of step 1:
Tumblr media
step 2: basic coloring
i’m just going to add a few adjustments to round off my basic coloring! i added just a little increase in curves to make the gif a little brighter (a), added a levels layer to enhance the contrast (b), and added some color balance. for this i worked with adding magenta and yellow tones to enhance the skin tones in the gif. i also made the midtones a bit more ‘purply’ (c) (as this is the end colour i want to achieve) and also did the same for the shadows (d).
Tumblr media
for a darker gif i would probably add more curves and an additional brightness/contrast layer. color balance is also a really important tool to just play around with, ‘warmer’ scenes need more cyan/blue balance, while ‘colder’ scenes need more yellow/magenta balance. our final product is:
Tumblr media
step 3: painting colors
if you wanted, you could probably leave your gif right there, but i like colors and i’m going to embrace them! 
now there are three methods that i bounce between and they really depend on the type of gif you’re working with. an ideal scene would have a strong background color (see step 4) already for you to work with, but the truth is the majority of scenes don’t. as this scene is fairly neutral in background coloring, you’ll see we can’t just use selective colors to get the purple we want, so instead we’re going to do something a bit different. warning: this method won’t work for scenes with a lot of movement! for that you need step 4 or step 5.
first, something i always do with colored gifs, is i add a gradient map layer of black + a light shade of the final color i am trying to achieve, like so:
Tumblr media
i then set this layer to ‘soft light’ and lower it to an opacity that i think suits. for this gif i lowered it to 20%.i think this makes the darker colors a little more ‘purply’ and overall gives a smoother affect what we’ll do next.
Tumblr media
next is the fun part! we’re going to start adding in the purple. to do this, we want to create a new layer right at the bottom of all your coloring layers, so sandwiched between the actual gif and your first curves layer. then i grab my paint brush (you want one with the blurred edges, not a solid brush),   use the same purple tone i selected for the gradient mask and paint around yen’s face and body. 
i like to split my left and right side into separate layers. this is because i like to use a large paintbrush to solidly paint the left hand side of the gif, and then use a large eraser to get rid of the color from her face/body. the larger eraser you use, the smoother it looks (i’m not saying try and use a 600px eraser, just a 100px rather than a 10px creates a better effect). now it looks like this:
Tumblr media
don’t worry that it looks very white, that’s just because it’s under all the curves layers! so now all i do is change it from normal, to multiply, and as you can see we have a nice purple background:
Tumblr media
repeat this process for the right hand side:
Tumblr media
you may find that if you’re working with a darker gif, setting these layers to ‘hue’ or ‘color’ is better. and again, the opacity may need a bit of playing around with. remember it’s ok to play around with effects and what might work for one gif will not work for another just because scenes and lighting vary!
then i just painted a line across the bottom, over her chest area, and lowered this to a 41% opacity. this just helped to enhance the purple feel of the gif. now we’re left with:
Tumblr media
so a few finishing touches, i noticed that there was a spot by her right arm that as she moves, exposes a bit more of a ‘yellowish’ band. to fix this, at the top of all my coloring layers, but under the gradient map, i added a layer and just put a small purple dot on top with my paintbrush, and set the layer to ‘color’. 
Tumblr media
lastly, i wanted to make the right side a deeper purple, so i used selective colors to manipulate the magentas to the shade i wanted. then with the layer mask, painted black over the right hand side of the gif so it didn’t affect this coloring.
Tumblr media
and there we have it! i have my finished gif!
Tumblr media
tips: sometimes it’s nice to enhance lighter and darker parts of the gif further. i didn’t with this one as i already thought the natural lighting did it well enough, but of course this might not always be the case! 
Tumblr media
while i liked the coloring of this gif, i wanted a bit more variation in the purple tones. so, under all the coloring layers again, i painted some black on the right hand side, set this to softlight, and played with the opacity (it ended up on 65%). then added another purple layer on the right hand side, but set this to overlay instead and again lowered the opacity (to 58%) and got this:
Tumblr media
you can play around with this to get different tones, and you can even change the color of what you’re painting on to create a gradient effect! for example, if i change the black softlight layer to a dark blue, and the overlay purple layer to a lighter pink, i get this:
Tumblr media
and then you can use blue and magenta selective colors to play around with that even more. it’s all about experimenting and seeing what works!
step 4: selective colors
to do this method, you need to have a gif that has a strong background color. it doesn’t matter what that color is, or even if it has two, but it doesn’t work well with a netural background. for example this gif (which i’ve already done my base coloring on), is perfect to work with:
Tumblr media
as we can see it’s very yellow in the background which is perfect! so the first thing i’m going to do is  is create a new hue/saturation layer, set this to ‘color’ and then on the drop down menu change the color to ‘yellow’. from here i just dragged the hue bar till it was pink/purple.
Tumblr media
because i’m working with yellow, which is a skin tone, we find that her skin has also gone pink. now i don’t really want this effect as i’d like her to look natural! so all i’m going to do is grab my black brush, paint on the layer mask, and erase this from her face. this won’t be so much of a problem if you’re adjusting cool tones, such as blues or greens.
Tumblr media
i then used some selective colors to adjust the magentas and the same ‘tip’ i used for step 3 to add a little bit of gradient variation and all done!
Tumblr media
step 5: all the time in the world
sometimes, you have scenes that won’t conform to either of the two methods listed. either they have too much movement for step 3 to work, or too neutral a background, or the selective colors won’t work for the overall color of the gifset. also, if you’re working with something of a yellow background with a lot of movement, the selective color method doesn’t work great because it ends up disturbing the skin tone of the person you’re giffing.
for example, for this gif i did all the steps in step 3, and got this:
Tumblr media
now i love the coloring, but it’s messy. the movement of her hand means that her hand dips in and out of the yellow, but leaves background exposed.and the turn of her head means half her head ends up yellow. so instead of giving up, because i am a stubborn bitch, i take my yellow layers i’d painted on, merge them into one and start coloring them frame by frame. 
to do this i adjust the timing of the yellow layer to fit each scene, and fill in/erase the yellow around yennefer as required. it ends up looking a bit like this:
Tumblr media
i must say this can be pretty time consuming. it’s fine for shorter gifs, but it doesn’t work for a gif with a lot of frames. i don’t mind cos i just do this in the background while watching a movie, but it’s not for everyone. you might just prefer to play around with selective colors as in step 4, but you also might find if you’re adjusting warm skin colors, that you’ll need to use a layer mask frame by frame to still get the clean affect you want!
anyway, i added a slight yellow layer set to ‘hue’ over her dress to round it all off, and after coloring it frame by frame i got the affect i wanted:
Tumblr media
obviously if you did all gifs like this it would take all week, but in mixing all three techniques i end up creating the sets i want!
the end
and that’s it, i hope this has actually semi-made sense and is of help. if you have any further questions or points you want elaborating on please feel free to ask! a lot of this takes time, practice and experimenting, so my biggest tip is just be patient and play around with what works for you :)
4K notes · View notes
kiekiecarrera · 4 years ago
Text
Background Text Effect Tutorial
Got asked by @owenpatrickjoyners​ how I did the effect for this gif:
Tumblr media
First of all, let me preface by saying that this actually took a whole lot of time and it still came out really choppy, so the first tip I can give you is if you’re gonna do this effect, you better have a shit ton of patience and choose a gif where the character doesn’t move alot because it will make things so much easier.
I’m using photoshop 2020.
This is an advanced tutorial that supposes that you already know how to create gifs and add text (i’ve explained how to add text layers here, if you want), so the first thing you wanna do is make the your gif, resize, sharpen, add adjustment layers and whatever else you want to add and then save the psd files (just as a precaution).
Once you’re satisfied with the gif, open your animation timeline bar to the frames animation mode.
This is what mine currently looks like (I’m just doing 8 frames for the tutorial):
Tumblr media
Now we’re gonna add the text layer that’s later gonna become the background.  I’m choosing The Bold Font as my font, set to Bold, size 29pt, line spacing set to 30pt.
Tumblr media
You’re gonna fill the page with the text so it fills the whole space, then you’re gonna make sure the first frame in your animation bar is selected and you’re gonna set the text layer’s opacity to 60.
Tumblr media
The first thing you’re gonna do is duplicate the text layer to match the number of frames you have. I have 8 frames, so I’m creating 8 text layers. Then you’re gonna hide them all by clicking on the small eye icon next to them:
Tumblr media
Your text should now be hidden:
Tumblr media
So, this is where it gets tricky, because to get a good result (which I didn’t really manage that well), you have to work the layers one by one.
Start with the first layer. Make sure the first frame is selected in the animation bar, and click on the small eye icon of the first text layer to make it appear.
Tumblr media
For the first frame, if you make any change, it applies to the rest of the frames, so before we do anything else, we’re gonna make sure it doesn’t. To do that, just select all the other frames, and hide the text on those by clicking the eye icon:
Tumblr media
Now, select the first frame again. Add a layer mask to the text layer by clicking on the mask icon at the bottom of the layer tray.
Tumblr media
Your text layer should now have a small white rectangle next to it. Click on that rectangle, grab a hard round brush, make sure the selected color is black, opacity set to 100%, and use it to hide the text on Alex. You do that just by clicking and dragging the brush all over him. I’m starting with my brush sized to 37, but depending on what I need, I might change the size to make sure I get the edges.
Tumblr media Tumblr media
If you don’t know much about layer masks and how to use them, I’ve explained it a little bit in this tutorial.
Basically, the black brush hides anything on the layer, and the white brush makes it reappear.
As you work and mask the text, you’ll notice the white rectangle start getting some black color in the shape you’re hiding. Once you’re done and satisfied, your frame should look something like this:
Tumblr media
Now you’re gonna move on to the next layer. You’re gonna select the second frame on the animation bar (which should only show owen with no text). You’re gonna make the second layer of text appear by clicking on the eye, add a layer mask to it like we did before, and then start masking the text on owen the same way you did before.
Tumblr media
Alternatively, you could just duplicate the original text layer and work on the existing mask, but you would have to go back and hide that layer from the first frame and all the other frames. It’s up to you.
Tumblr media
And now you’re gonna repeat the process on each frame. Select a new text layer, add the mask, hide the text on owen. It takes a whole lot of time, energy and patience, and if you look closely at my og gif, I didn’t do much of a good job, lmao.
This is why I mentioned it might be better to use gif with minimal movement - if the characters are not moving, the edges stay aligned and you can use the same layer on multiple frames instead of having to do them one by one.
Anyway, once you’ve done all your frames and layers, your psd looks something like this:
Tumblr media
And once I save (check this for more details on my save settings), my gif looks like this:
Tumblr media
And that’s it!
If I skimmed over anything or you feel it’s not clear, just hmu and I’ll try to do a better job at explaining things :)
I hope this works for you! <3
80 notes · View notes
artofsaraelena · 6 years ago
Photo
Tumblr media Tumblr media Tumblr media Tumblr media
Another year, another Inktober materials post! WOOHOO! 
We are have officially 7 days until Inktober starts, and you can bet I’m being a complete nerd and crossing the days in a countdown in my calendar. 
So let’s move on to a bit of a more in depth look at the materials I’ll be using this year, shall we?!?! 
(I also apologize for the long ass text post, but the Read More seems to not be working so we´ll have to deal with it. tumblrgetyourshiztogetherwillyou)
Ink & Brushes
Speedball Black India Ink - Oh yes ma’am! I broke up with Higgins Black India Ink this year and got myself a bottle of Speedball’s Black India Ink! From the few tests I have done so far, Speedball’s ink seems a bit more viscous, more opaque, and dries smoother than Higgins’s ink. 
Pen Nib Holder -  I’m mostly going to use it with different ink mixes to shade different areas in which I want a certain level of opacity that I can’t get with my other pens. And yes, it totally makes you feel like you are in the Harry Potter world writing about spells on parchment. Win win. 
Round & Detail Brushes - As you can see, not much change in a year in regards to the brushes I’ll be using. I did find last year that I gravitated towards the rounded brushes almost every time, so I ditched the flat ones this time around and instead stole a detail brush set from my brother :3. Why buy when you can thrift? ;D I use these to shade my art with black India ink! 
Calligraphy Bamboo Brush - Oh yis, I’m bringing back this bad boy! I mainly use it to cover large areas of the paper with water and then plop ink washes all over. It is like the grown up version of finger painting, but while looking stylish af and pretending you know what you’re doing. 
Eye Dropper - My existence had absolutely no meaning until I started using an eye dropper to measure my ink washes. I know you might think you can do without it and just wing it, but for the love of the art Gods - just get one. It’ll make you happier than drawing hands easily. 
Glass Bottles - Aha! What is this nonsense you say?! I often have leftover ink mixes by the time I’m done drawing, and you know what?! There is nothing better than having a little bottle in which to store your really dark, dark, semi dark, light dark, very light ink mixes. Plus, it makes you look like a bad ass witch ready to poison someone when you have them all together. Bonus. 
Palette - Yes, it is the same cheap 60 cent palette from last year. Yes, it is still kicking like the little miracle it is. Yes, there is some golden ink that I seem to not be able to get off of some edges. I’m still not gonna spend another 60 cent on a new one. Come at me. 
Paper & Misc
Bristol Paper - By far the best paper I’ve used when working with ink. Yes, it does warp a little. But I haven’t found a paper that is as smooth to work with in ink. It has the perfect texture for ink washes as well as sketching away with thin pen nibs without damaging them! No real reason as to having two different brands other than Canson was on sale at my local art store, and a girl’s gotta save the chaching. 
Gold & Silver Leaf - OKAY. EVERYONE HOLD STILL. I might have been squealing about these every time I see them since I got them. I have always loved to incorporate little gold or silver accents and textures into my dawings, and I just think the way they combine with ink drawings is even more orgasmic. So this year I’ll be diving into the wonderful unknown world of leafing and I. Can’t. Wait! I have absolutely 0 idea of how to use them, but I can promise swords, crowns, and costumes decorated with these little beauties. 
Adhesive & Sealer - These just came with the gold and silver leaf kit and since I haven’t used them yet, I can only assume they do exactly as they say they do. Shocker!
Sumo Grip Eraser by Sakura - I needed a new eraser for getting rid of the sketches after inking them, and saw a lot of people rave about this guy so now here we are! It promises to not smudge on the paper, and I’m all about that life. 
Pens
Sakura Pigma Brush Pens - YES, THIS IS THE SAME SET FROM LAST YEAR. Yes, they still have ink in them. Isn’t that bonkers?! I seriously cannot recommend these enough for outlines and line variation. The little guy was the most heavily used last year, and while it is running a little low, I plan on using it mainly to create textured brush strokes. 
White Gel Pen - I mean. Is there anything more satisfying than creating little white details on pitch black stuff? Probably not. This has also saved me multiple times from a sudden mistake that was able to be remedied easily. 
Itoya Aqua Roller Ball Point Pen - I don’t use this dude as much as my brush pens or Copics, but there are certain moments when inking when you just wish you had a pen that you could lightly shade and control opacity with. That’s what this dude is! 
Zebra Brush Pen (Super Fine) - It is even thinner than the Sakura Brush pen, which means even more neurotic detail making is definitely happening this time around. Yay! 
Kuretake Cartoonist Mangaka Pen (Fine) -  As I mentioned above, the little Sakura Pigma brush pen is running a little low, so I needed something to replace it with and I decided to try this one out! The ink is pitch black and the handling and line variation are just dreamy. 
Tombow Fudenosuke Double - Sided Brush Pen - Okay yes, this was totally a compulsive buy, BUT IT IS TWO PENS IN ONE! Bless it. The black end seems very similar to the Kuretake Cartoonist pen, with the added bonus of a gray to quickly shade with on the other end. 
Copic Multiliner 0.3 - 0.05 (Black) - Literally the holy grail of my Inktober materials. If you want to do Inktober but are on a tight budget (art materials are expensive af, I’ve been accumulating these over the last few years), get these! Don’t even think about it. I use them for literally everything from outlining, to precise and meticulous detailing, to shading. I completely ran through my previous set last year, and there was not a single piece I did not use these on. Just do yourself a favor and pick a few. Thank me later :)
Copic Multiliner 0.3, 0.1 and 0.05 (Warm Gray) - They are exactly the same as the above, but in a warm gray tone! I got these mainly to be able to shade certain areas of my drawings without having to deal with the in-yo-face opacity from the black ink set while maintaining total control and precision of the lines, unlike when I use brushes. I am literally itching to try these for little areas like eye lids, freckles, etc! 
AND THERE YOU HAVE IT! That’s all I got for you beautiful creatures this time around. I’ll be posting a little intro video to this year’s theme just like last year, so keep an eye out for that! I’m also planning weekly giveaways, daily timelapses of each piece being created, livestreams so you can hang out while I do that day’s drawing and other fun stuff like that :D I’m literally so excited to step into the Inktober madness again! 
Feel free to check out my instagram, where I’m the most active and post all of my art at! 
1K notes · View notes
graphictutorials · 6 years ago
Photo
Tumblr media
。・ tutorial four, graphic tutorial two by graphictutorials ゜+.*
-`. Hello everyone! In this tutorial, I’ll teach you how do make an edit/graphic with a TV and electricity doodles, like this: .’-
Tumblr media
1. Open photoshop and create a new document with the size you want.
For this tutorial, I’ll be doing 540x540px.
Tumblr media
2. Add your background. You can make it a solid color, use a pattern, gradient, texture, etc.
For example, I used the paint bucket tool to fill the background with a solid color (#d1ecff, to be exact), and I applied a pattern overlay (using the last one here) in soft light mode.
Tumblr media
So my background looks like this:
Tumblr media
A/N: I’m making the example pastel-ish, but you don’t have to!
3. Now make a png of a vintage-esque TV, or you can use one of these: 1, 2, 3, 4.
I’ll be using the 2nd png in the 1st pack.
Tumblr media
A/N: You’re going to want the screen portion erased if it isn’t already, because that is where you’re going to put an image.
4. This is optional, but if you don’t like the color of the TV, you can change it by: 
Double-clicking on the TV layer, and go to the “Color Overlay” tab, clicked the colored rectangle, choose the color you want, click OK, and change the mode to one of the following: Overlay, Soft Light, Color, Hue, or Multiply. Choose which one looks best with your color and you can adjust the opacity if you want.
For example, here’s what I did:
Tumblr media Tumblr media
5. If you chose a TV that already has antennae, skip this step. If your TV does not have antennae, like mine, I will show you how to quickly make some.
Create a new layer, choose a foreground color to a color that matches your TV color, select the line shape tool, make the line 2px weight with no stroke, and click and drag a couple lines from the top of the TV to make antennae. 
Tumblr media Tumblr media Tumblr media
A/N: You might want to rasterize those shapes (to do so, right-click on each layer and click “rasterize layer”) or put those shape layers under the TV layer.
Now create another new layer, use the ellipse shape tool, click and drag a small circle to fit on top of one of the antennae (hold shift as you do so to get an even circle). Duplicate that and drag it over to the other antenna.
Tumblr media Tumblr media
6. Now for the screen image.
Create a new layer and drag it under all of the TV/antennae layers.
Tumblr media
Select the pen tool. You’re going to make some points around the screen portion and connect them.
Tumblr media Tumblr media
Once you connect them, It’ll make a line like this:
Tumblr media
Go to the top bar and click the “Selection...” button. It will make the outline into a selection and that’s what you want.
Tumblr media
A/N: There will be a dialogue box pop up, but just click OK.
Tumblr media
Now it is a selection.
Click the fill bucket tool and click inside the selection to fill it. It doesn’t matter what color it is.
Tumblr media Tumblr media
Click CTRL+D to deselect it.
7. Now we will put an image/edit inside.
If you just want to put an image, open the image, drag it to the TV edit document, make sure it’s right above the screen fill layer, right-click on the image layer, and select “Create Clipping Mask.” It will be inside the screen portion and you can resize.
Tumblr media Tumblr media Tumblr media
If you want to put an edit inside, I’d suggest making the edit in a new document, merge all of the layers of the edit document when you’re done, drag it over to the TV edit document, make sure it’s right above the screen fill layer, right-click on the image layer, and select “Create Clipping Mask.” It will be inside the screen portion and you can resize.
For example, I quickly made this edit in a new document and merged all the layers:
Tumblr media
Then I followed the steps above and put it inside the screen.
Tumblr media
8. Creating the “electricity”. 
Create a new layer and use the brush tool with a simple hard round brush in a small size and draw a couple little zig-zags coming from one of the antennae. 
Tumblr media
Create another new layer and make a couple more for the other antenna.
Tumblr media Tumblr media
Now you could stop here, or if you want, you can make them into a little gif with the next step:
9. Duplicate one of the electricity layers, choose the select tool, right click on the document, and click “Free Transform”. Go to the top bar, and in the rotation box, enter -10. Hit the Enter key when you’re done.
Tumblr media
It rotated the duplicate slightly to the left.
Tumblr media Tumblr media
A/N: If it’s blurry around the edges, apply a Surface Blur with 5 Radius and 10 Threshold.
Duplicate the other electricity layer, Free Transform it, and apply a Rotation of 10. (Do the same number but polarize it. i.e., if you previously put -10, put +10 for this one. If you previously put +10, now put -10.)
Tumblr media Tumblr media
10. Open the frame animation timeline.
For the first frame, hide the duplicated electricity layers. Only the original ones should be visible.
Tumblr media
Create a new frame and in this one, hide the original electricity layers and un-hide the duplicates.
Tumblr media Tumblr media
Set the speed of the gif to 0.5, or something around there. You don’t want it too fast because it’ll hurt people’s eyes!
Make sure the loop is on “Forever” as well!
11. Go to File>Save for Web.., and save the gif.
And you’re done!
Here is my edit, image version:
Tumblr media
And here it is as a gif:
Tumblr media
Other Suggestions:
> For the full effect, you can go to the screen fill layer (not the image/edit inside of it) and select it, double-click, and apply a pattern overlay with a horizontal stripe and put the mode on Soft Light and lower the opacity to create that line effect.
Tumblr media
Result:
Tumblr media
> You can also apply an Inner Glow to the screen layer and create a shadow.
Tumblr media
Result:
Tumblr media
Anyways, I hope this tutorial/guide was helpful. If you need any help or have any questions, feel free to ask!
813 notes · View notes
thebrothershardy · 7 years ago
Note
(icon anon here) i just really like the ones you have of vintage nancy (/post/157628338961/) where she's against a colorful background, whether it's solid or gradient, whatever PSDs or filters or whatever you use on them just look really good!
oh that’s really pretty basic!! i’ll do my best here, and sorry if i explain a shit ton of stuff you already know how to do!!!
okay so i’ll try to basically redo a similar version of this icon:
Tumblr media
i’m currently using ps elements so your screen might look a bit different but it shouldn’t be too radical! let’s start just with a blank square for the icon base and a book cover of your choice:
Tumblr media
so for the icon base, i just picked a light shade of blue i liked, and then went in with pure white at a 40% opacity, and under the “soft light” mode, lightened up the bottom a bit (i only swiped over the layer twice but of course that all depends on the look you’re going for)
Tumblr media
time to cut out nancy! i use the quick selection tool and roughly grab her shape (to be soon cleaned up) and click on “refine edge” before i drag her over to the icon. the settings i use for the refinement below:
Tumblr media
let’s drag her over. right now she’s small and not properly cleaned up. if at this point, she’s way too big for your icon layer, delete her and ENLARGE YOUR ICON LAYER—otherwise you’ll have to make nancy smaller and end up pixelating her. it’s better to make her a bit bigger and then surface blur her/reduce noise if she’s fuzzy. BUT WE’LL GET TO THAT LATER. for now, let’s just go in with the eraser!
Tumblr media
so let’s start with making her bigger. i played with the size a bit until i liked how much of the icon she took up.
then grab your eraser! i typically use a “soft round” instead of a “hard round” brush because it’s not quite as harsh with the clean-up. i’m at around 13 pixels here just so i can get really exact. the zoom function is your friend here!
Tumblr media
so here’s what i end up with after erasing the unwanted bits. it doesn’t have to be perfect—ultimately, the icon will be seen at a lot smaller scale so a few mistakes won’t be seen all that easily!
Tumblr media
now time for coloring nancy! she’s a bit dark and a bit oversaturated for me, so here’s what i did:brightness: +45midtone contrast: +15hue: +5you can also play with the tint/temperature/ambient light/etc. here’s what she looks like now:
Tumblr media
now i’d like to change some specifics, like the color of her shirt/hair/lipstick. add another layer over nancy (create new layer is a tiny little square in the upper left of the layers box for me, or you can just press ctrl+j). let’s attach the layer to nancy’s layer (for my ps this is on the upper left, the tab called layer –> group with previous (ctrl+g will do this too)) and make sure it’s changed from “normal” to “color.” the screen should look like this:
Tumblr media
(ps i rotated nancy a bit)
OKAY let’s start with her shirt! i grab the brush tool (opacity is currently at 100% but you can alter that whenever you’d like) for that, and since i’d like her shirt to match the background, i eyedropper the color for an exact match. and then we color! you don’t have to worry about painting outside the lines since you’d grouped layers with nancy’s layer, so HAVE FUN. (another plus of having the color as a second layer is that a) you can erase it easily whenever you’d like and b) you can change the saturation or hue of this layer whenever you’d like, so you can easily change her shirt to purple/yellow/green/whatever in case you’re making a bunch of icons in different colors.)
so here she is after i’ve changed her shirt. LOVELY. 
Tumblr media
now i’d like her hair to be a bit blonder too since there are lots of greenish bits in there right now. i’m adding a separate layer for this just because i like to keep my colors separate, but if you like living on the wild side, go ahead and stay in the same layer you colored her shirt in. if you add another, make sure it’s still “grouped” with nancy’s and not just an independent layer.
so here’s the hair layer as of now:
Tumblr media
it’s a bit too yellow for me right now, so i’m gonna change the hue (ctrl+u) and go a little bit more orange (-3 was all i needed here). this is another reason why separating your color layers is a plus! changing the hue of all the colors at once would’ve made the blue change a bit too). so here we go now:
Tumblr media
i still don’t like how dark her hair is in certain places, so let’s change that. i’m gonna copy the same hair layer i just made (ctrl+j), but change the mode from “color” to “soft light.” here’s how it looks now:
Tumblr media
at 100%, the light is too much, so i changed it to 55%. i also shuffled it under the color layer because the soft light layer will def change the shade, and we want the color to stay the same.
the last color i want to alter is the makeup. i’d like her lipstick to match her blush a bit more, so i add another layer and pick a shade of pink i like. i take the brush tool and basically redo what i just did with her hair, ending up with two soft light layers and one color layer on top of the others. at this point you could also do little things like brighten the blue of her eyes, add in some eyeshadow, lighten up her eyebrows, etc, etc, just by adding new layers and painting to your heart’s content. 
Tumblr media
but i’m happy at this point! so let’s merge the layers into one giant layer. right click on any of the layers and choose “flatten image.” all your layers should now vanish—this is great for if you want to brighten the entire image as a whole, for instance. in this case, i want to make it a little less blurry.
i go to the upper left to: filter –> noise –> reduce noise. my settings for that are currently:strength: 6%preserve details: 10%reduce color noise: 6%
that’ll gently blur the “noise” on the icon and make it look a little better. that’s typically my final step.
and heeeere’s the final product!
Tumblr media
obviously there’s a lot here that you can alter based on personal preference, but this is just a basic idea of what i go through when i make an icon in ps. your photoshop might also look different than mine just a bit, but i guarantee you, even if the buttons are in different places, they ARE there, just somewhere else or under a different name.
oh boy i hope this was even SOMEWHAT helpful. if you have any questions, please come back and let me know!!!
8 notes · View notes
srattueba2b · 4 years ago
Text
Cleanup & colouring & editing spark
After completing my backgrounds, I then moved on to refining the linework. To do this, I used a very dark grey (as black may have stood out too harshly against the light background) and smooth brush.
I followed my rough pass pretty closely, though I did have to shorten the legs as they didn't have the stubby, rounded look I was aiming for, especially when she sits up. I also added some facial expressions to enhance the performance of the character- a bored look at the beginning to show she's disinterested in the blocks, closing her eyes as she falls to show she's bracing herself, and wide eyes as she sits up to suggest she's trying to process what just happened. Finally, I added some secondary movement to her hair, which I think gave it a cuter & more comedic feel.
I think these additions have greatly enhanced the animation- you can recognise Allie's emotional journey- making her feel more like a real person, plus her exaggerated expressions and secondary movement in the hair are cute & cartoony- reminiscent of the program that she is watching.
After that, I duplicated the line layer and used the one underneath to add colour- using the fill bucket. I also added some cel shading on the same layer, so that it was easier to stay within the outlines. Although Amber's style frame didn't include much shading, I wanted to indicate that there is a TV offscreen that's illuminating Allie's face.
In hindsight this has created a noticeable difference between our sections so I don't think I did a good job of keeping my style consistent with the group's guidelines. I did try to shorten the neck and enlarge the ears, but even still, this looks more like my own style. Plus, I'm also just realising that I coloured the eyes with black instead of the brown me & Amber agreed upon. In my next group project, I should take the time to sketch and practise the agreed upon style to make sure I can replicate it properly, before jumping into my own ideas.
Tumblr media
In the next stage of editing, I needed to add a glow to the little bear. I've since lost my original photoshop file but to do this I just exported his frames as a png sequence, loaded them into Photoshop as a frame by frame animation, and applied the outer glow effect to all layers. Then, re-exported it as a png sequence.
Tumblr media
To give Allie & the blocks some shadows, I duplicated their layer, tinted it to be completely solid grey, then used corner pin to distort it to the shape of the floor. Then I set the layer mode to multiply and the result was this. I'm so pleased that I've learnt this trick as I would likely have spent hours trying to draw the shadow myself in each frame.
Tumblr media
After that I needed to add the bear cartoon in Allie's eyes. I had forgotten to make them transparent in these frames as I was planning on just placing the cartoon below her layer. So, instead I used masks (something I became more comfortable with by working on Jellytots) to match the cartoon to the shape of her eyes. This actually worked a little better, as I was then able to lower the opacity of the cartoon, to look more like a reflection.
Throughout this first scene, one of my main sources of inspiration has been my family's own VHS tapes. I love how the amount of noise and slightly-off colouring creates a warm, fuzzy look. It feels very comforting, especially since I have memories tied to these recordings.
Tumblr media Tumblr media
I then wondered if I could replicate the same effect for this section- it could potentially make it feel more nostalgic and personal to the viewer. Using the tutorial below, I duplicated the entire composition 3 times and separated them into red, green and blue, then used position to slightly offset them, creating the off-colour effect. I also added a lot of noise in an adjustment layer.
youtube
youtube
I really like the end result, I think I was able to replicate the feel of a home movie & it gives the scene a nostalgic warmth. However, the effect doesn't work with the embroidery intro- it looks to bright & jarring and harder to read. Plus, I'm concerned whether using this effect in my scene will further differentiate it to the rest of the film- I want to maintain some level of consistency. So, I may try another pass at editing, this time only using the effect on the TV screen.
0 notes
kaixinsoh · 4 years ago
Text
As. 3: Infographic
Tumblr media
Date: 17 March 2021, Week 8
Brief: Identify some dataset(s) to work with. Apply necessary techniques to communicate complex information quickly and clearly through visual representation.
Introduction:
I've always been fascinated by charts, figures and data visualisation. Bar graphs, pie charts, donut charts... And eureka! I had a sudden stroke of inspiration - why not create an infographic with a donut chart on donuts?
(Initially, I also considered bar graphs about chocolate bars or pie charts about pies, but decided to go with donuts as I thought it would have the most variation in flavours, colours and toppings for visual variation and interest.)
Data set:
I researched various statistics about donut flavours and used Ranker's list of donuts, which contained a list of the number of upvotes/downvotes for each donut flavour.
Tumblr media
I then compiled the data onto a spreadsheet, and calculated the overall score (by deducting downvotes from upvotes) for each flavour. Subsequently, I calculated the percentage to find out the proportion of votes each donut flavour garnered, and sorted them from highest to lowest.
Developmental process:
I explored various compositions and styles for the infographic poster, first with each donut's size being in proportion to its percentage of votes. In my sketch, I had originally laid the donuts out in two structured rows, but I played around with different arrangements, such as by placing them in different positions or placing them in a box to resemble a box of donuts.
Tumblr media Tumblr media
Finally, I decided that it would be the best if I represented it with just one large donut in the centre of the poster. Although it may seem a little simple, but I think by having just one donut, viewers would be able to focus on it without having their eyes moving all over the place. After all, simplicity beats complexity, especially when distilling a complex set of data in an infographic. Furthermore, it would also be a clever concept to represent the donut data using a donut chart.
Tumblr media
I first created a base of the donut chart, then split it into different segments for each flavour.
Tumblr media
I used a variety of tools and techniques to illustrate each donut flavour. For example, for the powdered donut, I used splatter brushes to create the powdered sugar effect. For the double chocolate donut, I used the Curvature Pen Tool to draw the frosting. and for the Chocolate Sprinkles donut, I used the Rounded Rectangle tool to draw little rainbow sprinkles all over the donut. For the base of the donut, I added texture and depth by using multiple layers on Soft Light and different opacity, such as to create shadows or glossy highlights.
Tumblr media
Using layer masks, I masked out the rest of the donut, leaving only the specific segment visible.
Tumblr media
I added the title, text and a border in a frosted, pastel pink shade, as it reminded me of candy and fit the theme of donuts.
Tumblr media
Comments raised during the critique:
During the critique, Aaron said that it was an "interesting idea about donut flavours because the thing is presented as a donut...I think it's quite clever." However, he also pointed out that "the shape looks a bit like a lifebuoy, rather than a donut" and a classmate, Jing Quan said, "Maybe the hole in the middle could be smaller to look more like a donut."
Aaron also said, “After looking at the pink colour for a while, it's a bit straining on the eye. Same for the border as well.”
Tumblr media
How the work has improved post-critique:
Based on the feedback from Aaron and my classmates, I decided to tweak the shape of the donut by making the hole smaller, so it would look more like a donut. I also removed the border, and changed the font and line colours to a dark chocolate brown similar to the chocolate donut so that it would be dark enough to be legible, less bright and straining on the eyes, and also cohesive with the overall colour scheme and theme.
Reflection & Learning Points:
Even though the idea of infographics and data analysis may seem complex or intimidating at first, I found that I had a lot of fun creating this infographic.
This assignment taught me that being a good designer isn't just merely about visuals and graphics, but also being able to research, analyse and synthesise data.
In the 21st century, it is critical that we are able to comprehend big data, and carry out data analytics and data visualisation. Even though the data set I used for this assignment wasn't huge or complex, the skills I learned (such as compiling data into a spreadsheet, doing statistical analysis and designing a chart to present data in a simple yet compelling way) are lessons that will inspire me to learn and explore more about data visualisation even after completing this assignment and class.
0 notes
srfmp2021 · 4 years ago
Text
Pop Art Workshop
 The object of this workshop was to create a pop art style piece of work using the Threshold and Brush tools. The style of pop art that I have done below is reminiscent of Andy Warhol’s work, which I researched previously.
The first step was to open up the image below. This was a stock image so I was allowed to use it. With this image on the document, I selected it and pressed CTRL+J which produced a duplicate. It is often useful to have a layer with a copy of the original on it.
Tumblr media
The next step was to apply the Threshold effect. I did this by pressing the circle icon in the Layers panel and selecting Threshold from the list. This produced a Threshold adjustment layer which will apply to everything in the layers below it.
Tumblr media
I decided I wanted the image to be a little darker so in this step I increased the Threshold level. By increasing it from 128 to 174, more parts of the image are visible but much more of the image becomes black.
Tumblr media
With the previous steps finished, it was time to start preparing to add colour to the design. The first step was to add a new layer, which could be done by pressing the square with a plus in it within the Layers panel. I then changed the blending mode from Normal to Multiply as you can see below. This will allow the colour to be only visible on the white of the image.
Tumblr media
Here I am selecting the brush I will be using, which was a Hard Round brush with the Hardness brought down to 50%. I also set the opacity to 84%.
Tumblr media
Just before I started applying the colour, it was important to reduce the Threshold opacity to see the image below. This is so I am able to see the details of the image not visible with the Threshold so I can see where to colour.
Tumblr media
Below you can see where I have coloured the hair in green. This was easy as going over the hair with the brush tool, which I didn’t have to be too precise with. Any overlapping of colours will add to the pop art styling of the design.
Tumblr media
Using the same method as before, I brushed bright pink onto the girl’s t-shirt. It was important to make sure every element of the design was on a different layer for ease of editing, so this pink was done on a new Multiply layer.
Tumblr media
For this step you can see that I decided to use yellow for the skin. This was done by repeating the same process as the previous step with yellow selected as a colour.
Tumblr media
The final part of this design was to add the background. I wanted to pick a colour that was slightly more contrasting to the colour of the girl, which was why I went for light blue. This was also done on a blank Multiply layer.
Tumblr media
I also experimented with adding more colour detail to the background of the image. I did this using a blank Multiply layer and brushing using a bright pink/purple colour.
Tumblr media
This was the product of all the previous steps after increasing the Threshold layer opacity to 100%. This stopped the original image from showing through, which left only the pop art style design.
Tumblr media
After looking at the image for a while, I decided that I didn’t like the colour on the triangles. This was obviously the last step I did, and reversing this was as easy as hiding that layer. This emphasises the importance of using several layers for this design, otherwise this might not have been possible.
Tumblr media
0 notes
rthemars · 4 years ago
Text
Creating my own Rave Flyer
I have created a rave flyer of my own, using 80s and 90s flyers as inspiration. It incorporates distorted typography, a digital illustration of eyes, CGI-like planets and a starry background. My main goal for this design was to look as appealing and intriguing as possible, I did this by producing strange imagery with bright and vibrant colours so it’s really bold. However this meant that when it came to communicating a concept, there isn’t any clear message I’m trying to put across. Instead I am leaving this piece up for interpretation, which in my opinion is really interesting because one person’s perception could be completely different from another’s.
Overall I am really happy with the outcome, I think it has a really effective retro look thanks to the textures and colours applied. I learnt to embrace experiments/mistakes throughout the process, because I could have never planned the planets to look the way they do without trying new things. I think I have balanced the colour pallet really well, because I was able to incorporate many different colours but still not look overwhelmed by them. Finally I am really pleased with the face portion illustration, many times I have showcased hand-drawings in my outcomes but this time I wanted to demonstrate what I could do digitally.
Tumblr media
To come up with the overall design I sketched out some rough ideas, using a collage of 80s and 90s rave flyers as inspiration. I experimented with different typography, concepts and imagery, deciding to go with a funky styled outer space piece.
Tumblr media
To begin with I digitally drew a section of a face using my drawing pad, the program I used for this was Illustrator as I could tweak and change my lines that I created. I used the paint brush tool to draw the lines themselves and the direct selection tool to adjust them, by making sure all of the lines are properly connected there are no gaps for colour to seep through and spread, plus it will look more tidy. After drawing one of the eyes I simply duplicated and flipped it for a perfectly symmetrical set of eyes, the only thing was the light reflection in the eyes so had to redo one of them to match. 
Tumblr media
Once I was happy with my illustration I grouped the lines and expanded its appearance, this assured me that the lines wouldn’t shrink in thickness when moved to another program. On photoshop I copied in the drawing and added in 4 circles in-front of and behind the face, this was the beginning of my layout process where the planets would fill the circles. 
Next I filled in the face section with colour using a mixture of tools, this included the paint bucket, brush and mixer brush tools. Then for a background I took a faded image of space, it’s filled with stars which is a pretty and subtle touch.
Tumblr media
To create the planets I first tried filling in the circle selection with stripes of colour, with this I used the mixer brush tool to blend them together like Jupiter. However I thought this looked too flat so I wanted to see if there was a way to make it a sphere, to do this I clicked on the first thing that came up for ‘sphere’ but it turned into some strange 3D shape. Even though this wasn’t a sphere the texture of it looked perfect for a planet, so to make it one I rasterised the 3D which allowed my to then cut it into the space of a circle. I made sure that some of the shadow was displayed in the circle to help it look round, and I added a tiny bit more shadow by painting around the edge with the same colour.
Tumblr media
With this I duplicated the object and changed its colour through hue/saturation, I then experimented with different blending modes and put what I found appealing together. For example the yellow planet is made of two layers, one blended with overlay and one pin light. The two together display a clear round shape with a beautiful gold glow, and so I did the same thing with the other planets but choosing blending options that fit best.
Tumblr media
Once I had placed in the planets I also deleted the original circle lines, then I noticed that the face looked a bit too pale and colourless compared to the rest of the piece. Therefore I adjusted the vibrance all the way up to make the colours pop out even more, I also think the colours looked more pleasing anyway.
Tumblr media
To add in text I saved the piece at how it was and transferred it over to Illustrator, I then locked this layer and added a new layer of which I would draw on. Using the paint brush tool I drew the words ‘rave to the grave’ with my drawing pad, fitting the ‘rave’ and ‘grave’ around the planets. I wanted to create a groovy kind of style for the type, drawing round and curvy lines that fit together like a puzzle. I also wrote out the words ‘to’ and ‘the’ put I planned to bled these into the art, therefore it can cover the objects and be moved around.
Tumblr media
Once I was happy with my type I repeated the process to move it over to photoshop, where I placed it in the exact same position and put each word onto its own layer. Next I filled in the words with bright colours to match the pallet of the planets, the smaller words were then blended in so they stood out less than the main, large words. However as I looked at these words I felt that they stood out a little too much and looked a bit separate, therefore I searched for blending modes that will let specks through whilst maintaining its vibrancy.
Tumblr media
With the design completed I wanted the piece to look less smooth and digital, rather more old and worn looking. To do this I laid a textured image over the entire piece and blended it using the overlay mode, this alone was too prominent so to mellow it down I lowered the opacity to just 26%. I repeated the same process using a grainy texture but only for the large words, this was because they still looked conspicuous and modern in comparison.
Tumblr media
At first I was going leave this flyer as it is, however I then realised I hadn’t added any information on the event itself. I had to think of a way to incorporate it into what’s already there, so I thought having the text curve around the large planet would work perfectly. To do this I used the pen tool (path selected) to create a curved line around it, and then I clicked on the line with the type tool which allowed me to type along the path of the line.
I chose to display the days, time and location which is all you need for event information, I used ‘the Graveyard’ as the location for this design because it linked with the name of the event ‘Rave to the Grave’. This gives the name another meaning on top of a saying, it is now a literal sentence to match/promote the location. 
The font was chosen for its wide gaps and straight lines, I feel this gives is a retro-digital feeling which is the aesthetic I was going for. I started off using yellow as the colour of the text but thought it looked too bland, therefore I played around with duplicating, blending and layering until it fit perfectly.
Tumblr media
0 notes
semi-sketchy · 7 years ago
Note
This is for both of you! I am SO NEW to digital artwork and I have no idea what I’m doing. I’m using FireAlpca and I was wondering if you could give me some tips and how to make my art better! Thank yo7~
Forgive me for taking so long to get to this, just asks like this take a lot of time to put answers together for.
Seeing as you’re using FireAlpaca, this’ll be somewhat easier. So, I’m going to assume you’ve got a drawing tablet and have it set up in a way you like. If you’re using a mouse, then godspeed.
I also went into a lot more than I thought I would with many pictures, so I’m going to put this below a read more.
First, let’s go over a few basics.
Tumblr media
Canvas size. I’ve seen it and done it myself, so let me tell you, you want a large canvas. That’s the resolution I use, I like to have something that’s 16:9, but the aspect ratio is up to you. Extra large canvases can also cause FireAlpaca to lag, so keep that in mind before you do a 10,000x10,000 canvas. Find something that’s at least over 1,500x1,000 that your computer can handle. It’s a lot easier to shrink something down than to blow it up and you can always crop out extra space at the end. If you noticed you drew the sketch small, I recommend blowing it up some before lining so you have more room for details and so if you upgrade your monitor in the next few years, your old artwork won’t look pixelated.
Tumblr media
Correction/stabilization. You’ve probably heard many people talk about this already and are using it, so I’ll keep it brief. It uses some digital tech to make your pen movements seem more fluid and flow better. Find the number that feels right to you and adjust it as need be. As you can see I keep mine pretty high, so here’s a quick example of the same drawing with different stabilization settings.
Tumblr media
…I somehow got progressively worse each time. Well, the important thing is you can see the smoothness of the lines and how they flow better, so that’s what matters. Now onto the next topic.
Tumblr media
The brush tab. FireAlpaca is widely used and that means it has a huge community that makes custom brushes. Some people find this confusing, so I’ll try my best to walk you through installing custom brushes.
First, you want the actual brush. I recommend looking through DragonLoreStudios’ brush packs as most of the ones I use are from them. Some cost points, but there are a few free packs. (Pack 6 has a water texture which I freaking love.) You’ll need to keep those files, so I recommend making a folder on your computer where you keep all the custom brush textures.
It’ll be in a zipped folder, so you’ll need to extract it. Just right click and select “extract all” to a folder that is NOT the zipped folder (done this a few times). Now the hard part.
Tumblr media
Click that icon, “Add Brush (Bitmap)” and select the image from your computer.
Tumblr media
It’ll pull this up. This is the tricky part. Some brushes come with what the presets should be to make it look like it does in the preview, however not all do. You can do some tweaking if you change your mind about something or it didn’t work like you wanted it to by double-clicking on the brush in the brush tab. However, since this one is from DragonLoreStudios, there’s a preset panel I can match this to.
Tumblr media
And that’s the end result. They update that panel once in awhile and it is time consuming to put in a bunch of brushes, but they carry over from version to version, so no need to worry about losing your custom brushes when you update.
Tumblr media
Lastly, if you’re like me and want to organize your brushes, I introduce to you folders. I had some people ask me about this on my last stream, so it’s as simple as layers and folders. Just click the folder icon, name it, drag ‘n’ drop. Nice and easy way to keep your brushes organized.
So far, haven’t said a whole lot you didn’t know, huh? Alright, let me get into some stuff that I jumped for joy when I found out.
FireAlpaca doesn’t have a multi-select….or does it?
Tumblr media
Yup! I didn’t find this out for a long time. If you hold shift with the wand, you can select as many areas as you want. It seems like a silly thing to get excited over and you may have already known about it, but I figured I’d point it out since my friends and I took forever to learn about it.
The blur sucks. We all know. No matter what computer you have, when you turn it up over 120 it gets so laggy you can’t hardly use it. But, those big canvases, you can’t use a dinky little 100 size blur on it. Welcome to filters.
Tumblr media
I’ll admit, I don’t quite know what everything on that list does. HOWEVER, I do know what gaussian blur does and with the select tool, it’s amazing.
Tumblr media
Let’s say you drew this awesome background, but you want those dots blurred however you don’t wanna sit here for 10 minutes with the manual blur tool.
Tumblr media
It’s amazing, really. Only want one side blurred? Just use the select tool and blur that side. I wish I knew about this a year ago whenever my airbrush shading wasn’t smooth enough.
Now, the hue is also something that has saved my shading life more than once. It works just like you’d expect. Don’t like that background color? Think it needs more pop?
Tumblr media
Simple. The other two options that I know on the filter tab are also great! Sand and cloud. Depending on how big your canvas is, it might take the computer a second to put it out, but it’s a texture that’s randomized every time you do it and here’s what they look like with black and white.
Tumblr media
Not very interesting, huh? Well, put a color below them and turn that layer to overlay…
Tumblr media
Wow! It adds some texture! I personally like to turn those down to about 15% opacity so it doesn’t overpower the image, but it’s nice for adding texture to your plain, otherwise straightforward, backgrounds.
So, time we take that knowledge and move to the miracle that is clipping.
Clipping is your go-to tool for shading and colored lines. I can’t believe how often I have to tell my friends “no, don’t grab the paint bucket use clipping” because clipping looks better. Always. Alright, for an example I’m gonna grab a newer piece that I already finished since I still have the project file.
Tumblr media
Notice the clipping? I actually used more, but had to merge some layers because a clipping layer can’t clip onto another clipping layer. I’m gonna go backwards a little here and show you how helpful clipping can be.
Tumblr media
This is without clipping. Not very nice looking, is it? I shaded with black as a base color, the lineart sticks out like a sore thumb and it lost its soft look. I actually use black a lot to shade, but only as a base color (unless I’m shading a really deep color, then black is basically my only option). After I got all the shading, I made a new layer and turned on clipping.
Tumblr media
Now with this layer, I’m free to put color into the shading. If I did this with say a paint bucket, I would end up with spots that didn’t quite reach because of the antialising or it would expand if I turned on that on and I’d have to go over it again to clean it up. With clipping, I get clean lines and am free to change the color with ease.
The ears are a gradient, which means it’s time for some clipping ex machina mixed with the hue tab.
Tumblr media
I made a copy of the top half of the color layer that covers the part I’m shading.
Tumblr media
Now we got it pasted in with clipping on the ears. It matches up perfectly, of course, but there’s no shading. Time for the hue tab!
Tumblr media
Look at that. Was able to keep the shading even with the gradient while adding a bit of hue shift to the purplish side. THAT is the power of clipping. Of course, use clipping for the lineart mixed with a bit of airbrush for the ear gradient (since the color layer ain’t on the lineart, have to color that by hand) and remembering to darken the lineart around the shaded areas, and we get this.
Tumblr media
Sounds complicated, but it’s really simple and the result doesn’t look half bad. I’ve used clipping + hue on so many drawings and it’s saved my life.
Now, another little nifty trick is that white boarder. You don’t have to trace all the way around your piece, that would take forever. Let’s go back to our little grumpy Tara piece.
Tumblr media
I added some color to help the boarder stick out. Now, first we wanna make a layer above the background layers, just below the color layer, and turn off the background.
Tumblr media
Should be looking like this.
Tumblr media
Next, we’re gonna use the wand to select outside and under the select tab, click “inverse”.
Tumblr media
Now, it’s time to expand! It’s the button right under inverse, you can see it in the last image. How big or small you want it all depends on you and the canvas size, so play around until you’re happy with it. For this example, I’m using 7 because this is a pretty tiny canvas.
Tumblr media
Next, we want the fill tool. Honestly this thing is so much more useful than people give it credit for.
Tumblr media
Get the whole area and boom! That’s it. Deselect, turn your background back on and take a look!
Tumblr media
Beautiful. The reason you don’t want to use the paint bucket is it wouldn’t get every spot. If you drew a tuft of fur or a little corner, it wouldn’t reach. This way makes it so every inch is covered. However, with fur and all, there’s a bit of a draw back and something you’ll have to fix manually.
Tumblr media
Look how it squared those spots out, yikes. You’ll have to take your pen and round them as I did in that earlier piece with Miles.
I think this’ll be the last thing I cover and I myself am not very good at this, but I want to show you comics in FireAlpaca.
Step one: do NOT USE THE SNAP FOR THE LOVE OF GOD, PLEASE. THERE’S A BETTER WAY.
For real though, don’t do that. Make a new canvas (I wouldn’t use the comic tab, I just find it screws with all the knowledge I have and all it does is make a new canvas anyways).
Tumblr media
Great. Next step.
Tumblr media
We’re going to go to the layer tab and click “add panel material”.
Tumblr media
That’ll bring this little box up. Whatever you pick is up to you and remember the undo button does exist, so choose whatever you want and click “OK”.
Tumblr media
We got it started! That’s the easiest part done. It’ll automatically set you to the “panel divide” tool so you can get working. Drag that tool across and it’ll cut lines and if you hold shift, you can do diagonal lines.
Tumblr media
Here’s a quick example. If you adjust the kerning and leading, you know, this stuff:
Tumblr media
You can change how close it’ll cut the panels.
Tumblr media
However, for some odd reason, you can’t do completely diagonal. Like if you take a square and cut from one corner to the other, it won’t work. I don’t know why, maybe they’ll change it in an update, but that’s how it is right now.It also takes a little getting used to, so mess around with it.
The great thing about doing this instead of using the snap (besides it looking better) is nothing will go above it. Even if it’s the bottom layer, you can’t go over it or erase it. However, sometimes you want a little panel overlay and this doesn’t give you many options, does it? Maybe you’d like to transform it, but you can’t because it’s a comic layer. You wanna convert it.
Tumblr media
Under the layer tab, just click “rasterize material” and it’ll turn it into a normal layer you can use your select tool and transform stuff on. Now if only they had a way to create text boxes my life would be complete…
Oh, one last thing I wanna mention: ALWAYS save your project file. When you finish a piece, don’t just save it as a PNG and be done, save it as a MDP (FireAlpaca file) too. I can’t tell you how many times I’ve drawn something, uploaded it then realized I forgot one minor detail I wanna fix. Without the project file that contains all my layers, I’d be so screwed. Just keep the file around for maybe a week or two, at least until you know you won’t go back and edit it any time soon. Also be careful you don’t save a file as a PNG to show it to a friend, make progress, then just aimlessly click “save” because it’ll be in the format you last saved it as. I’ve had a friend do that several times and it’s terrible when that happens.
Okay this went from some help to a sales pitch. Still, when I found out about this stuff I thought it was a godsend. I might’ve just rambled on about stuff you already knew about, but I tried to cover some more obscure things you won’t find in basic YouTube tutorials. Anyways, hope this was of use to you!
-Sassy
6 notes · View notes
rtterm1project · 4 years ago
Text
Series Inspired LWLies Cover - Digital
I have created a Little White Lies inspired magazine cover for the series Penny Dreadful: City of Angels. This piece is a combination of a pencil drawing and digital elements, which I think creates a really effective mixture that’s eye-catching and impressive.
Tumblr media
To begin with I scanned in my drawing onto photoshop, and drew on any unfinished lines with the brush tool. I then adjusted the image’s brightness/contrast using the legacy tool so the blacks were darker and the whites were brighter, however because I had a lot of shading I couldn’t adjust this too much otherwise I would lose detail in the shading. Next I selected the background using the quick selection tool, and deleted it so it became transparent.
Tumblr media
With this I changed the opacity to multiply and added a layer behind it, the multiply opacity allowed me to show colours on the layer underneath without completely loosing the tones of the drawing. This was super helpful because it made it easy to colour in as the blacks remained completely black even when coloured over, and for the shaded parts I could use just one colour for the whole of the sections as I had already done the shading with pencil. Before I actually filled in the colours I had to decide what ones I would use, I did this by choosing a LWLies cover that I thought had an attractive colour scheme and selected them using the eyedropper tool.
Tumblr media
Once I had sampled all my colours, I filled in the sections with the brush tool on the bottom layer. As I did this I resized the brush size with ‘[’ for smaller and ‘]’ for bigger. I only used these colours on the clothing which worked well together perfectly, however I did almost use the skin tone from the inspired image for the skin but it was too light so darkened it slightly, though it did help as a starting point.
Tumblr media
Next I wanted to add a halftone to the collar of the clothing, for this I used the brush tool but selected the halftone brush from ‘special effects brushes’. However when I used this straight away the dots were so small you could barely see them, to fix this I opened ‘brush settings’ through window and on ‘texture’ I upsized the scale until I had the preferred size.
Tumblr media
Filling this in rather than carefully going round the edges I selected the sections with the magic wand tool, allowing me to easily brush over the whole shape. This helped because the halftone is less obvious to see as there’s a lot of empty space, whereas a solid colour is full and clear. Even though I could have done this technique with most of the piece, I wanted to practice using the brush tool accurately especially as I was using a drawing tablet. I saved this as it was because I wanted to see what would look better, the original pencil drawing for the face or filled with colour. So for the coloured version I repeated the brush tool technique onto the skin and hair, separating all these sections with different layers so I could easily edit them.
Tumblr media
For the background I wanted to create a repeating pattern of the title of the series, I did this by typing out the title with a chosen font using the type tool and rasterised it. Then with the rectangular marquee tool I selected around the type, making sure the background is transparent. With this I used the define pattern edit which made it so I could repeat the selected area as a pattern, and by clicking new fill layer > pattern on layer I could edit how big or small of the pattern I want it repeating, leaving me with the page being filled with the type. The reason left space around the type when selecting is so that when the pattern was created the writing would be clear to read, otherwise the lettering would’ve been too close together and look messy and unclear.
Tumblr media
To add the drawing to the background I first had to merge the visible layers of the face, making it easier to move over to the background. I then moved both of these layers onto the Little White Lies template, that gives the right size and title of the magazine. Finally I added colour on a new bottom layer so the background wasn’t just transparent, however I wanted to show different colours for each section separated by the rips. I did this by creating a selection with the polygonal lasso tool, and filling it in with the paint bucket tool.
Tumblr media
0 notes
ridingthatbike · 7 years ago
Text
On giving up (or is it listening?)
I set a 2018 goal of going camping at least once a month, year round. I’m 0 for 2, in my attempts so far. I’m still counting them, because I think the attempt is the important aspect in the winter months. But I’d be lying if I said I wasn’t disappointed. I don’t like quitting but I am getting better at it (or at least, I am doing it more often). Back in January, Becky and I planned a quick overnight backpack in Moraine State Park - we’d planned a short hike on account of the limited daylight, and aimed to stay in the backpacker shelter off of Link Road. Temps were warming up after a long deep freeze, and it felt so great to be out. But a big, wet, heavy sky loomed, and the whole day felt like we were living in black and white. We were both out of sorts, and kept trying to brush it off. Becky was feeling crappy and couldn’t eat in the morning. I somehow left my house without hat and gloves (how??!!). Rather than head back, we stopped in Slippery Rock to get a sandwich, a dollar store hat, and gas station gloves. What a stupid start to the day. We got to our trailhead and felt disoriented. Which spur trail goes to the main trail? Why do we feel so unsure of ourselves, of our map skills, of the day at large? Were we being cavalier about a winter camping trip? Doubt set in.
Tumblr media
We hiked a few gray miles in, and as the rain started, we decided to stop for a snack at a point that looks down over the lake, which was full of fog and mist and dampness. We talked about our misgivings, about how even though we’d be able to get out of the rain in the shelter, we wouldn’t be able to dry our wet clothes around a fire, since the rain was forecast to continue all night and into the next day. It was in the 40s while we were hiking, but was going to drop below freezing overnight, and it just seemed like a bigger risk than it was worth. It’s one thing to take risks when you are sure you understand them, but we both felt so out of sorts that we didn’t know if we could trust our decision making, and it felt important to listen to that uncertainty. And so we scratched.
Tumblr media
It always feels so stupid to carry all your shit when you’re not camping after all. Like, we had fun, but would it have been more fun if we didn’t have a big backpack, or a fully loaded bike? But why am I even worried about maximizing anything? We had fun, is that not enough? Am I being greedy?
Tumblr media
This past weekend, I met up with my friend Helena out in the Quehanna Wild Area. We’d initially planned for two nights and three days of nosing around, finding all the modern ruins we could find. Literally nothing went according to plan. It had rained or snowed for 21 of the first 25 days of February, and was forecast to rain an inch and a half our first day out. We almost bailed on going out for the first day, but decided to spend it hiking and then stay in a murder hotel rather than sleeping in the rain. We found the abandoned hunting camp built into the boulders, saw lots of elk and coyote scat, some trees with antler rub, and a few elk tracks in the mud, but only saw deer. The jet engine test bunkers were pretty wild, and felt a lot like the section of abandoned turnpike near Breezewood -- just woods and nothingness, but with crumbling asphalt underfoot. Something was here. Where is it? There’s a heaping mound of earth, with a vent in the back -- the whole bunker has been consumed (or buried). The other bunker is totally above-ground still and has surprisingly little graffiti on it, though what is there is pretty potent.
Tumblr media
Peeking into the mostly-buried jet engine test bunker
Tumblr media
Helena log-hopping over a stream.
Tumblr media
Kunes Camp - the side walls of this cabin are boulders, and the trail goes in one door and out the other! We strung up a laundry line in our motel room and blasted the heater to dry our soggy clothes, attempted to eat some garbage pizza, and fell asleep with the heater still blasting.
I woke up feeling kind of queasy and dehydrated. I hadn’t been able to eat much at all the previous day, and started to feel nervous that maybe I was getting the horrible flu that’s been going around this winter. Choked down a clif bar and packed up my bike anyway, pleased that the rain had stopped. By the time we were fully packed up, the rain had started again. We rolled slowly up the rural highway, and my legs felt heavy. My body felt heavy. I felt exhausted. We got off the pavement and onto a side trail, which just looked so great! Slippery with wet leaves, wet clay, running water, lots of sticks trying to hitchhike in my derailleur, normally so fun for me, but I was feeling locked fists in my belly. We did a small climb and I started to see spots and my vision clouds and becomes dark, briefly. I don’t think I’ve ever felt worse on a bike in my entire life. I was sure I was going to throw up, but breathed through it. What is this? Why do I feel like this? Helena asks me the same question I ask everyone else when they are miserable: did you drink enough water? I laugh. Of course I haven’t. It’s so hard to drink enough when it’s wet and cold. But I also probably haven’t eaten enough, and I don’t know what else is going on with my body. I wait for my heart to stop pounding, and we ride on, expecting to come out about a mile up the road. But in a surreal X-Files moment, we discover that we’ve come out about a mile back DOWN the road. How is this possible? We are both good map readers! What just happened?
Tumblr media
The face of a girl trying not to puke on her bike.
We try again to cut in on a side trail, and ride it down to the bottom, where a stream is running fast and high and cold, and we decide that we don’t want to cross it. Back up we go. On that climb, I decide with certainty that I am not camping tonight. I don’t know if I am just slow to warm up and maybe I can work through feeling so shitty, or if I am getting sick. I really don’t want to be throwing up at camp. But I don’t feel so dead that I can’t ride at least a little more, so we ride the pavement up to Reactor Road, which is a charming little paved offshoot to the site of the former nuclear reactor. There’s nothing there anymore, just a sign at the edge of a grassy field. Here, we decide to split up -- Helena will continue riding the dirt and gravel, and I will just take the pavement back to the car, and head home.
Tumblr media
It’s disappointing on so many levels -- the weather has finally cleared up, and there’s even a ghost of the sun in the sky, trying to burn through the opacity of a month-long cloud. It’s the first time I’ve gotten to ride with Helena, and I hate to bring anything other than my A-game and usual sunny disposition, especially with new friends. It’s my second scratched camping trip in a row. I am so disappointed that I forget to be gentle with myself, forget to be proud of even trying to get out in such shitty weather, almost forget that it was a super fun weekend and I loved all of it, except for the almost-puking and almost-passing-out parts. I slept for ten straight hours at home. Obviously I was Not Well in some capacity.
But what I don’t know is … am I getting soft? Am I scratching because I’m not as tough as I think I am? Has some weird pride aspect turned up, like I’m trying to prove something to myself, or to somebody else? Or am I tougher than I ever used to be, so I’m going out in sketchier conditions, going out more often, encountering situations in which a person really ought to scratch? I don’t like the not-knowing. I don’t like being unable to tell if I’m sick or if I just did a bad job of managing calories and hydration, because it means I don’t know what I can do differently or how I can prevent feeling like that in the future. Can it be, that not everything is a learning opportunity? Or maybe the lesson is just in going easy on myself.
Tumblr media
Graffiti on one of the jet engine test bunkers at Quehanna. I was sad to get sick but I did not despair!
1 note · View note
captainquestionart · 7 years ago
Note
hey my man, amazin work on act omega- the team behind it is wonderful!! im lookin to make a fanventure myself, could you give any tips as to pixelling in gg and how to edit images? you know like basically any recoloured, edited clusterfuck of an image in homestuck that hussie does (planets, for example) + how you tilt to have them at different angles? sorry if this sounds like a loooot and you can completely ignore this ask(!), but im just clueless and motivated, my guy
Thank you for asking! I never get asks and I’m always glad to help with any questions like these.
…Anyway, the team behind Act Omega is definitely wonderful, take it from me. My job is typically to do all sorts of sprites/ sprite edits (like the ones in the [S] Resume animation) and I draw the characters and/or backgrounds for panels often enough, so I can definitely give you some tips on those things.
Most editing effects like the ones you asked about aren’t really my domain - a lot of them are done in Photoshop by (among others) our amazing art director @joyfulldreams (she’s seriously great go follow her please), so I asked her for some additional tips.
(This is probably going to turn out long enough to be annoying to scroll past, so I’m putting it all under a read more.)
First off, I have to clear up that when it comes to editing the typical Homestuck sprites (like the ones in [S]:Resume), GraphicsGale hasn’t been my main tool.
The first thing I did for Act Omega was drawing some talksprites (for Tumblr asks, mine were never actually used). I used to do that in Gale, but as soon as I tried it using Paint Tool SAI’s aliased brush (Legacy Pen) instead, I decided that was more comfortable. Most of my work for Resume, redrawing sprites from Collide we couldn’t find elsewhere, was done that way too.Pros of using SAI (and probably Photoshop too? Not 100% sure) for sprites compared to Gale include:
The layers are much, much easier and more intuitive to use than Gale’s. To me Gale’s layers kinda suck and using them is always a pain.
Using a sketch is easier too, and you can make it semi-transparent
Gale doesn’t really do pen pressure, which is most important in talksprites but still can be helpful for the regular sprites too.
That said, when I had to make entirely new animations (like the one above), I had to use GraphicsGale, with its handy preview feature, and it is perfectly possible to use only Gale for everything. Rotating things also had to be done in Gale and then manually cleaned up a little, since SAI will turn anything you try to transform into an ugly anti-aliased mess.
So, bottom line is, I personally prefer to use Gale and SAI in combination, but that’s not strictly necessary. If you’re going full-on Gale (and now I’m gonna assume you haven’t used it too much before), here’s
A few quick practical tips on using Gale I wish I had figured out earlier:
The default settings of Gale include a 1 pixel brush and a 3 pixel brush, but no 2 pixel brush. Since pen pressure won’t save you here, that’s inconvenient. The less you need to go back and painstakingly correct your lines to be the right size, the better. You’ll want to make that brush yourself by opening a new file in Gale, 32x32 pixels, and 1 bit (2 colours). Make it look like this and save it as a bitmap (BMP) image: 
Tumblr media
And then find this option:
Tumblr media
and put your bitmap in there. Gale will recognize that as a custom 2px brush.
If you want to make your images have a transparent background, make sure you tick that box in the options of the frame, not the layer (the little ellipsis button next to each Frame thumbnail -see below). Gale still has no way of telling if your BG is transparent or just white, so I recommend always working with a different color as a background. That way you can tell from the animation preview - if the BG looks white there, it’s transparent. Also make sure these settings apply to every frame by changing “current frame” to “all frames”.
Tumblr media
If you want to change the opacity of something (like, say, god tier wings on a troll), you need to save the image as a .png first and tick the box “With Alpha Channel” underneath…
Tumblr media
     …then open the image again. Only then will the transparency slider above the palette sliders actually work. You can also use the thick blue pencil button:
Tumblr media
    …to set your pencil tool to opacity mode, which will make anything you draw over into the opacity set by the slider.
Tumblr media
Now for some more Homestuck-specific tips:
You’re probably better off making sprites in separate parts (a layer for the head, one for the body, one for the arm(s)… from the start. It’ll save you a lot of trouble when you need to animate them. In fact, it might not be a bad idea to also put all of those parts into a neat spritesheet so you don’t have to look too far when you need to reuse something.
Tumblr media
(I didn’t see this one all the way through because there was too much to do but you get the idea)
If you don’t already, make sure you have a big folder of references from Homestuck, both panels and sprites, just so you know how The Huss would have done it. That might be more important for Act Omega since we’re trying so very hard to be as close to canon as humanly possible, but it’ll be very handy regardless.
What else is there… well, I could say some more stuff about the art style itself but I figure if you want to start a fanventure you’ll probably have the basics of that stuff down already.
Now, for what Joy had to say about editing images:“Say you need for example a scene on Prospit or Derse, then the process goes like this:1. Find an image (or images) on google that are generally of italian cities and cathedrals. A lot of iconic “Derse and Prospit” images actually come from pictures of the roof of the Milan cathedral, but generally you should get the gist with the Florence skyline and by cobbling together a bunch of cathedral images. 2. You want to use Photoshop tools like the magic wand or selection tool to cut out the sky and anything else that isn’t the actual building. Usually anyway depending on the image. If you have a picture with a bunch of tourists you could just crop them out or use the clone stamp tool to make them disappear oooooo.3. Turn the entire image grayscale, and (optional at this point but you might want to do it eventually) bump up the brightness and contrast. 4. Then you want to eye-drop pick from a canon Derse or Prospit image the light and dark Derse/Prospit colors. For prospit its like a bright saturated yellow and a more dark orange color? You can actually play around with the two colors you use to vary contrast and stuff if you’re putting together a bit scene. 5. Copy the cathedral layer and lock the opacity, put it above the original layer, and fill it with the solid light color. Set the layer mode to overlay.6. Do this again but with the darker color, and put it below the original layer.7. Lower the opacity of the original layer. It should start to look how hussie makes it look.8. Sometimes to give it an additional rough pixellated look, I’ll go to image>adjustments>posturize and play around with it. It gives the image some of that gif-ified look.But basically when it comes to hussie-fying images these are some of the basic main principles you want to keep in mind. The posturize effect, using overlay layers, and finding images and mashing them together creatively.
Also another key thing to note is that when you resize or transform things, there are different transformation MODES. In order to transform pixellated stuff, you want to use Nearest Neighbor. That will preserve sharp edges, but sometimes it can distort things and make it look weird. In situations like that Hussie often uses Bilinear instead, and then sharpens the transformed part. He usually ONLY does this when he is making things smaller or rotating them, not to enlarge anything, because then the blurred/sharpened-ness of it becomes way more obvious.This is honestly the best advice I can give. A lot of it is kind of fucking around with blending modes and layers until you get the right LOOK lol.”
(-Joyfulldreams 2017, give her a round of applause)
…So that’s pretty much some general technique pointers. I’ll post them publicly in case anyone else would like to know.I hope I haven’t just been stating the obvious here, wasn’t entirely sure what I could say that would really directly be helpful, but in any case, if you have any more specific questions you think I might be able to help with, please feel free to send me a PM.
9 notes · View notes
crossartgamedesign-blog · 6 years ago
Text
Portfolio Breakdown: Pollution
Cyclops Spraypaint Can:
Tumblr media
This was another very early design and so is a little rougher than my later ones. There was only one version of this made, as it was unclear whether or not this concept would be included. It was a bit of a shot in the dark for ‘pollution,’ but I sectioned off my work in this way as I believed in the beginning that we would have an entire level dedicated to pollution, and so the designs here have that in mind. I figured it could be a very low level pollution enemy. If I were to change it, I would design another version with a larger cyclops eye, as this is meant to be its main feature and I would like to exaggerate it a little. This version is more similar in size to what the actual top of a spray can be like, but with a cartoon-like character, a larger spray tip/eye would look better. I am otherwise pretty happy with this design and like the cyclops theme and how the red and green work together. 
Tumblr media
This was also an original test version before I had decided to incorporate the cyclops element.
Progress:
Tumblr media
I blocked out the general shape for the can first and placed the silver and the green flat colours into two separate layers. I went around the shape with a loose outline. 
Tumblr media
I added some shading to the can to give it a more metallic appearance.
Tumblr media
Here I went in another layer and added shine to add further to the effect.
Tumblr media
I then added in the cyclops eye and mouth in more layers, painting over the top.
Tumblr media
For a final touch, I used a special brush and lowered the opacity to create the green spray paint cloud.
References:
Tumblr media
(Somsanitangkul, N/A) This was my main reference for shading the can, although mine was stylised. It was also a good reference on how to lay out the cap of the can.
Tumblr media
(Networx, N/A) This was how I got the idea for the colour. I felt one bright block colour would match well with the game. I also tried to look through cartoon images of spray cans but surprisingly did not find anything which matched the type of style I was going for, in particular for the expression of the can as a character.
Factory:
Tumblr media
As part of pollution, I felt that a factory may be a great choice for this. I tried to incorporate the expression of the character into a nuclear symbol on the factory and felt it somewhat worked but could do with some tries at redesigning. This is the only version of this concept that I created. I feel that it turned out just ‘alright,’ not amazing but not bad. It is not very memorable. If I were to redesign it, perhaps I would not have the two towers as the exact same, maybe differing them somehow would help, maybe in expression or colour, to make them pop. I do feel that having the towers as white here is perhaps a bit boring and I could have referenced better tones for this. 
Progress:
Tumblr media
I started off by getting two differently sized rounded rectangles for the main body and the top of the first factory. I set on horizontally and used the Warp tool on the larger vertical one to push in the sides and make the top and bottom thinner and thicker from each other. The main body rectangle was white, so I am using a grey background here to make it visible.
Tumblr media
In a second layer, using layer constraints, I used a soft brush to paint the shade of the main body in soft lilac. I also added in a nuclear symbol. I did this by creating one of the three ‘leaves’ then duplicating them around the centre circle.
Tumblr media
I added an outline and set eyes onto the nuclear symbol, incorporating it into the face. If I had more time, I would experiment with different eye shapes more here.
Tumblr media
Finally, I grouped the layers of the first factory and set them under the first group, using the Transform tool to shrink down the second factory. I then used a special brush for the smoke from the factories.
References:
Tumblr media
(Jemastock, N/A) This was my main reference for the factory design. It is very similar, but factories do tend to look very similar. I wanted to remove the centre part and only focus on the main ‘pillars’ in the design, rather than as a whole building. 
Tumblr media
(Serj, N/A) I figured something more like this would be a good reference, with one bigger than the other. I decided to remove any platform from my design. 
Works Cited: Networx, N/A. Networx. [Online] Available at: https://www.networx.com/article/the-greenest-way-to-use-aerosol-sp [Accessed 5 May 2019]. Jemastock, N/A. Vectorstock. [Online] Available at: https://www.vectorstock.com/royalty-free-vector/factory-cartoon-fla-vector-15247812 [Accessed 5 May 2019]. Serj, N/A. ColourBox. [Online] Available at: https://www.colourbox.com/vector/factory-cartoon-icon-on-white-background-vector-17935320 [Accessed 5 May 2019]. Somsanitangkul, S., N/A. 123RF. [Online] Available at: https://www.123rf.com/photo_20326843_blank-aluminum-spray-can-isolated-on-white-background-aerosol-spray-can-metal-bottle-paint-can-reali.html [Accessed 5 May 2019].
0 notes