16 Lost Tomb Reboot icons for somein30's May round

Jun 02, 2021 18:47

As usual, jsfunction came up with a very interesting challenge format for this last month's round at somein30: you had to define axes in a number of dimensions (1, 2, or even more), and fill the resulting line/matrix with icons. I chose tough ones that forced me to make clean and muted icons, which was really challenging - but a lot of fun! tinebrella had the brilliant idea ( Read more... )

art-icons, tv-cdrama-losttombreboot

Leave a comment

jsfunction June 3 2021, 13:34:53 UTC
OK first of all I'm impressed that you solved the HTML/CSS problem! I need to study your markup to see what happened there, I just couldn't get the Y axis to work D:

Your set is full of awesome, I love that you chose challenging axes (and an extra axis!) and that you combined more vibrancy with texturized and left muted ones clean (maybe this is just my personal style but I tend to combine those things the opposite way, so this seems like a fun and different way to do it).

Your versatility shows really well here cause I look at the grid and I like icons pretty evenly from all parts of the grid. In the textured, vibrant top row I'm especially into 2 - the coloring is fantastic, so saturated and eye-catching!, and I LOVE the texture use cause it's somehow shiny and gritty at the same time. 1 is incredible, the simple text adds so much and the textured background is lovely, and still looks clean.

11 is another top favorite for me, the smooth lighting combined with the peachy coloring is just so pretty! And the text is super cute, I really like the fonts and placements.
The bw row is all around great, I especially love the negative space composition in 13 (the painty pastel alt is fantastic as well!) and the crop + strong contrast + greast lighting in 16. The lighting and coloring in 6 is great too and I'm also a bg fan of the text use and muted contrast in 14.

Thanks so much for entering, I love how much thought you put into this!

Reply

tinnny June 3 2021, 19:22:54 UTC
OK first of all I'm impressed that you solved the HTML/CSS problem!

Hee, yeah, I guess I'm contrary like that. When you said it wasn't possible, I immediately tried to make it work, and when I had it, I made a test post with the table style to see if it would come out on LJ as well. Which it did, but there's really no way to tell if it will work for everyone, since you have so many ways to style your journal.

Also, I didn't quite succeed in what I wanted to do. I wanted to have a border on one side of the axis, or even an arrow, but I didn't manage that. So I used a gradient instead to indicate the direction.

What I did is this:

x-axis: style="background: repeating-linear-gradient(90deg, white 0%, grey 100%);

y-axis: style="writing-mode: vertical-rl; vertical-align: center; background: repeating-linear-gradient(0deg, white 0%, grey 100%);

the first two columns for the y-axes:


texturized - - - - - clean
vibrant - - - - - muted - - - - - b/w

the last row for the x-axis:


 
 
negative space - - - - - - - no negative space


eta: oh yeah, and the column width was important, too. It will not make the column wide enough for the text if you don't explicitly set the width. For some reason the text size calculation doesn't work for vertical text...

Reply

jsfunction June 6 2021, 16:40:34 UTC
Wow, so many CSS properties I didn't know existed, never heard of writing-mode before. These are good to know, thanks so much for the explanation! :D

Reply

tinnny June 3 2021, 19:35:48 UTC
that you combined more vibrancy with texturized and left muted ones clean (maybe this is just my personal style but I tend to combine those things the opposite way, so this seems like a fun and different way to do it).

OOoh, that hadn't occurred to me. I probably just thought I'd start with my favorite thing = vibrant + textured. Which of course meant that I had an incredibly hard time with the opposite side. :DD But then I think making b/w look good with a lot of textures would have been harder, since b/w depends on contrast a lot.

Your versatility shows really well here cause I look at the grid and I like icons pretty evenly from all parts of the grid.

Thank you! <3 It was such hard work! I really tried to make the gradients look good - which is also why I absolutely wanted a 4x4 grid, because it would have been "too easy" otherwise. ;D

In the textured, vibrant top row I'm especially into 2 [...] and 1

Thank you! They're two of my personal faves, too. (although I can't really say I hate any of the icons in this set. I worked hard on all of them. :))

11 is another top favorite for me

Oooh, thanks for picking that one! (Nobody else picked it.) I had such a hard time making the text look like it belongs to the right person. And I think every single "o" in that Noooo is a different font. :DD

Also, that scene is just hilarious and I love it to bits. :D

The bw row is all around great, I especially love the negative space composition in 13 (the painty pastel alt is fantastic as well!)

Thank you! The b/w row all started out as "normal" and then I took out the colors and couldn't resist posting the alts, too. :D b/w is sooo hard for me. :D

16 is the only one that really started out as b/w already, and it fought me for the longest time.

The lighting and coloring in 6 is great too and I'm also a bg fan of the text use and muted contrast in 14.

That whole column is my fave, because crops like that are my fave kind, so those were relatively easy. I knew I had to make 14 all faint and low-contrast, because the mood in this scene is so subdued. I'm happy it works!

Thanks so much for entering, I love how much thought you put into this!

Thank you for coming up with it, the challenges were all so inspiring, it's been a joy to work on them. <3

Reply


Leave a comment

Up