Harry telling the story about a fan (Lucas) who spoiled his marriage proposal to his partner (Natalia) by telling him on the street | Together, Together Tour in Amsterdam Night VI (May 26th)
Harry telling the story about a fan (Lucas) who spoiled his marriage proposal to his partner (Natalia) by telling him on the street | Together, Together Tour in Amsterdam Night VI (May 26th)
“We were always lucky that we had each other to share the experience with. I think we were the lucky ones. We could have all lost the plot because of all the madness that was going on around us. But we were all very good at calling each other out and we genuinely got on, were able to know each other’s boundaries and suss each other out” — Niall Horan.
HOW TO: Make an iPhone Layout
+ Downloadable Template
Hi! I've gotten a few messages asking for a tutorial on my iPhone gifsets — but instead of only doing a tutorial (that would probably be triple the length this one already is), I decided to turn my layout into a template with all the bits and bobs! In the "tutorial" under the cut, I'll share everything you'll need, a free template download, and quickly go over how to use this template. :)
Disclaimer: This template uses Video Timeline and this tutorial assumes you have a basic to intermediate understanding of Photoshop.
PHASE 1: THE ASSETS
1.1 – Download fonts. These are the fonts used for all assets I've included in my template:
– SF Pro or SF Pro Display (Regular, Medium, Bold): Either version works, they look nearly identical. You can download directly from https://developer.apple.com/fonts/ or easily find it via Google
– Bebas Neue: Free on Google Fonts, Adobe Fonts, and dafont
– Times New Roman (Bold): Should be a default font in Photoshop
Make sure to download and install any of the fonts you don't already have before opening my template. That way, once you open the template file, all the settings (font size, weight, spacing, color, opacity, etc.) are as intended.
1.2 – Download my template.
Before you use my template, all I ask is that you don't claim or redistribute it as your own and that you give me proper credit in the caption of your post. Making these iPhone gifsets takes me a longgg time and turning this layout into a template took several hours too.
DOWNLOAD TEMPLATE VIA KO-FI ← This template is completely free to download (just enter $0), but if you feel inclined to tip me, I appreciate you! 💖
BTW this template also includes some of my frequently used icons!
NOTE: If, for some reason, you open the template and see the pop-up shown below, click "NO" — otherwise, the fonts will be all messed up:
And if you see this triangle with an exclamation point by a text layer, don't double-click it — it'll mess up the font as well:
PHASE 2: THE GIFS
I'm just going to briefly go over gif sizes and my recommendations. Also, keep in mind when grabbing your scenes, you'll want all of these gifs to be the same amount of frames.
2.1 – Background Gif: 540 x 540 px.
I recommend this size so you have a good amount of visibility for the gif behind the iPhone wallpaper. I also recommend making this black and white (or in my case, black and white with a slight blue tint — idk I just like the way it looks) so the wallpaper coloring can stand out.
2.2 – Wallpaper Gif: 230 (w) x 500 (h) px.
Keep in mind the very narrow dimensions of the wallpaper! And also keep in mind that you'll have a bunch of apps and widgets covering the image. I try to use wide shots (or layer my clips into looking like wide shots). Also, keep in mind your color scheme for your set and your character's aesthetic! I tend to focus on one or two colors for the wallpaper.
I usually position the wallpaper to the side with 20px bumpers, so there's lots of space to see the background:
2.3 – Large Photo Widget Gif: 201 (w) x 96 (h) px.
2.4 – Small Photo Widget Gif: 94 x 94 px.
PHASE 3: THE TEMPLATE – "IPHONE" FOLDER
In this section, I'll try to quickly walk you through how to use this template and some bits that may require extra instructions. I'll be going through each folder from top to bottom.
3.1 – Status Bar.
Time, Service, and WiFi are pretty self-explanatory. In the Battery folder, you can use the shape tool to adjust the shape layers labeled "Fill (Adjustable Shape!)" to customize the battery level.
3.2 – Message Notification.
Again, these are pretty self-explanatory. I've already masked the circle for the contact photo, so you can simply import any photo and use the transform tool to shrink it down. The circle is 24x24 px. If you don't want to use a photo, there's another folder called Default Initials.
If your message text can't fit the text box, the message should end with ellipses which is how iOS caps off long texts.
3.3 – Blurred Banner (IMPORTANT)
This folder is easy to miss because there's only one placeholder layer in there. On iPhones, the area behind a banner notification and the dock get blurred (including the wallpaper and any apps).
What to do: Make a duplicate of the apps in Row 1 and/or widgets that intersect the message banner, convert them all into one smart object, apply a Gaussian Blur filter (Radius: 3.0 pixels) on the smart object, and move the smart object into this masked folder!
(There's another masked folder in the Wallpaper folder for the dock which I'll go over in that section.)
3.4 – Apps
Turn off the yellow guide if you don't need it to keep things aligned and turn off layers you don't need by clicking the eye icon. Replace the "App" placeholder text with your app name, change the color or gradient of the square to compliment your color scheme, and add your custom app icon overlay!
If you can't find an app icon you need from the ones I provided, flaticon.com is a great resource. Also, if you can only find the filled version of an icon, check out this tutorial for how to make any text or shape into an outline.
Also, each app folder has 4 notification bubble options (1-4 digits). Again, you can toggle these on and off as you need!
3.5 – Big Widgets
I like using these when my wallpaper has A LOT of negative space to fill. I included the Photos and Books widgets in my template, but there are lots of widgets available on iPhones. You can check some of the other ones I've done here, or if you have an iPhone, simply try adding some widgets to your phone!
There are also widgets bigger than these, but they would take up half of the phone screen which is why I don't use them for these edits.
3.6 – Small Widgets
The only thing I'll say about these — because they're pretty straight forward — is there are a lot more weather themes than I included in my template. Also, if you set your character's phone to evening, the weather widget will show a dark background (sometimes with stars), so keep that in mind.
Speaking of, I've included Light Modes and Dark Modes for, I think, every applicable widget.
3.7 – Page Dots
These barely perceptible dots indicate that your character has more pages of apps than shown in your gifset (so if an anon tries to come at you, you can just say "it's on the next page of apps" /j /lh)
3.8 – Dock
Again, the dock has notification bubble options and I've included the default app designs, custom filled designs, and custom outlined designs for iMessage, Phone, Email, and Safari (there's also a FaceTime alternative if that's how your character rolls). These are usually the apps people keep in their Dock, but this is fully customizable too. So, if your character is, like, super obsessed with Candy Crush or something and needs it in thumb's reach — you can put it in the dock.
3.9 – Wallpaper
This whole folder is masked already to a 230x500 px rounded rectangle.
Inside, you'll find another "Blurred Portion" folder for the area behind the message banner notification and the dock.
What to do: Duplicate your gif layer and place it in this folder, remove any sharpening filters, and apply a Gaussian Blur filter (Radius: 3.0 px). Be sure to add any coloring/adjustment layers ABOVE this folder and your original sharpened gif layer.
PHASE 4: EXPORT
We made it!
I hope this template makes it super easy for you to recreate this layout! If you decide to try it out, feel free to tag me with #usernik.
If you notice anything wonky about the template, kindly let me know so I can fix it! And if you have any questions about how to use this template, please don't hesitate to send me a message! I just ask that you try to be specific in your question so I'm able to answer you the best I can!
Hi! I've had these templates sitting with me for a while and never got around to uploading them lol. Here are Google templates for musical artists, a newer style originally seen in this set. Plus, an extra template that goes with my previous layouts, showcasing media titles (seen in this set). As always, my templates are free — all I ask is that you give me proper credit in your caption if you use my template or take inspo from my design. Enjoy! :)
Get the NEW Google templates free via ko-fi: MUSIC TEMPLATE | MEDIA TEMPLATE (Donations appreciated but not required <3) Includes PSD/PSB templates with pre-made layer masks, shapes, and tips for the following designs:
– Overview
– Members
– Songs
– Albums
– Movies and shows (.psb)
Additional resources:
– My original animated Google search overlay tutorial & template
– Extended Google template (image search results, biography, related searches, animated "no search results")
– Karla Google Font (this is the only font used)
– Backgrounds via Unsplash: [Blue] [Pink]
Nik. Hi. Real talk. I need to know /how/ you colored the top gif in this set bc whenever I color Mustafar it always comes out too green or too red or even too blue
hi shale!!! I can definitely try to explain it but tbh I just kept slapping new adjustment layers on until I got to something I liked lskdjfklsjd
under the cut, I'll try to explain how I went from the faded, almost all-yellow HDR coloring to this natural-looking skin tone and monochromatic background!
I'm just going to mention each adjustment layer and try to describe why I used them:
1. Brightness/Contrast — No adjustments, just set this layer to screen and it helps create an even brightness across the gif
(I'll keep that masked circle there so we can keep track of the original)
2. Color Balance — I just toggled the sliders and I honestly can't explain any rhyme or reason so I'll just include screenshots of my settings ldkjflsd
3. Levels 1 — I increased the highlights (the right-most slider) A LOT
4. Selective Color 1 — After doing stuff to get rid of yellow, I... added yellow lmao. But you can see the difference from the masked section. It feels more like a natural-looking yellow now imo
5. Selective Color 2 — This time, I used the red, yellow, neutral, and black channels. For red and yellow, I mainly focused on neutralizing the yellow by adding more cyan
6. Hue/Saturation 1 — This was just a baby hue/sat layer where I reduced the saturation of red by -7, pulled the hue slider down for red by -2 and for yellow by -4, and then I fully desaturated greens, cyans, blues, and magentas
7. Hue/Saturation 2 — In this layer, I fully desaturated the yellows and masked Anakin's face! Working towards making the background monochromatic
8. Hue/Saturation 3 — This time I fully desaturated the reds and fully darkened them, using my brush to apply these settings only to select parts of the background and Anakin's robes where I saw red peaking through
9. Levels 2 — In addition to using the RGB channel to brighten and add shadows, I also used the Red channel to make the shadows more cyan. You can see below how it made the background a bit more blue. Later, when I come back in with another hue/sat layer, I’ll be able to desaturate the cyan again and further neutralize the background.
10. Hue/Saturation 4 — Fully desaturated cyans and blues like I said I would! Now the background is neutral again
11. Hue/Saturation 5 — This time fully desaturating the yellows and masking out Anakin’s face. If you look at the difference between the image above and the one below, you can see the one above just had a tinge of yellow still in the background. And now that’s gone!
12. Selective Color 3 — I mainly added blacks to the red and yellow channels to deepen the shadows of Anakin’s face!
13. Levels 3 — Just making things a bit brighter again
14. Hue/Saturation 6 — His skin was looking a little too yellow, so I neutralized it a bit using the red and yellow channels
15. Levels 4 — Uh, brightening again sdlkfjsld
16. Hue/Saturation 7 — His skin was still looking a bit too saturated imo, so I desaturated the reds by -6 and desaturated the yellows by -28
17. Levels 5 — Lastly, there was some heavy grain in the upper corners from brightening the gif, and the dots were moving so violently that it was distracting, so I decided to darken it a bit only on those corners!
And that’s it! :jerrycry:
I hope something of this was coherent and helpful!! lsjdflksj
Hi! A few people have asked me about my gif-making process and an anon asked about my coloring on a specific Bridgerton set. So, I decided to make a tutorial combining both! This is a very in-depth tutorial but there’s also nothing groundbreaking here. If you enjoy seeing how other people work like I do, this is for you <3 very long tutorial under the cut!
Hi! I was wondering how you get such high quality gifs? Do you have Topaz or maybe sharpen in Premiere/After Effects? I’m new to making gifs; I’ve been exporting 1080p clips from Final Cut and recoloring + turning into gifs in Photoshop at the 540p width for tumblr. The results are passable but nowhere near the quality you’re producing. Even exporting 1080p gifs for Reddit, while lovely, don’t compare. Yours must be 4k or even 8k. If you don’t mind sharing, I’d love to know your process!
Hi! Gosh, really, thank you for the kind words ♡ That means a lot!
I don't do anything special with mine, I just use the same files that are in 1080p. I do have an upscaler but that can only upscale any photo to x4 the size. I think I can probably upscale gifs, but I'd have to manually upscale every frame and then make the gif in Photoshop, but ngl.... I'm a lazy gifmaker hahahaha.
My sharpening process is very simple. I only use Photoshop in making gifs. I've pretty much used this process in all types of media/fandoms (Anime, dramas, tv shows, kpop, etc.) Feel free to experiment on your style as it varies with everyone else. You can find the full tutorial under the cut.
Edit: Maybe I shouldn't have used such a dark gif as an example hahahaha oops
I use the timeline method in Photoshop to make my gifs. Here is a tutorial that's a bit similar to how I make gifs. For Arcane, the frame speed I use is either 0.04 or 0.05.
I've based my sharpening process on a tumblr tutorial years ago by another blogger but I can't seem to find their blog post :(((( if anyone knows it, please let me know!
My sharpening process are as follows:
First, I duplicate the base gif in photoshop
So now, I have 2 copies of the gif. Then, I'll be sharpening the duplicate layer, so go to Filter -> Sharpen -> Smart Sharpen
Here are the settings I use to sharpen gifs:
Click okay, then you will see this under your layers
Some people stop there and then color their gifs, but I prefer to add another layer of Gaussian Blur to make the gif less noisy.
Here are my gaussian blue settings:
Click okay, then your duplicated layer will look like this:
Next, make your layer opacity to 80%.
Then, double click the right adjust icon on the gaussian blur settings
Set the opacity to 20%, but you can adjust as needed.
And you're done sharpening the gif! You can color and add PSDs to it right after. As always, dark scenes are going to be difficult to sharpen and color, so try to experiment and tinker around.
Hope this helps! If you have any questions, feel free to send an ask/message!
gummygunk
pixelskylines
discoholicmusic
jbbartram-illu
theartofmadeline
