[50% OFF SALE] iNitsua Z Twilight HD/SD

[zausser]

Just to damn good to keep to our self!

iNitsua Z Twilight HD is NOW ON CYDIA!

This project like the first twilight is a collaboration
between K.Nitsua and myself.

Fully Animated LockScreens Themes, Auto Create App Store Icons, iAcess Keyboard Skin,
Complete UI in truly one of the best color combination's you can find.
Built for the user in mind! Just take a look at this thread! Join in
and make your iPhone4 a WORK OF ART!

Now for the good stuff! All Image are full res so you can get the full effect! Nice...[/B]

[ame="http://www.youtube.com/watch?v=LDZ-qUkvb4k&feature=player_embedded"]http://www.youtube.com/watch?v=LDZ-qUkvb4k&feature=player_embedded[/ame]


















:::

_______________________


:::




Want some Detail in your iNZTHD theme? Then this
iNZTHDetail theme is for you!
Upcoming in the NEXT donators release and being sent to Cydia as well!





Above are NEW Optional Image loading screens. This optional theme is sent to ALL
Donators and will be on Cydia soon as part of a major update!





:::::
___________________________

:::::







Below are some GREAT iNitsua Z Twilight theme add-ons! Check them out!


Download this great mode by tbonegrafix here!


Download Coop2009's mod here!


Download Floppy Weather Mod with analog clock here!

Download Max Pa1n Weather Mod with digital clock here!

Download icon sets here.


Download Zero's Slideshow Springboard Mod here!


Downloadeous Maximus iAcess Keyboard Option here!


Download Floppy's lower weather attached at the bottom of this post!


Download Darkness777 SBSettings Toggle pack attached bottom of this post!


Download chg128's white slave theme here!


Download all of 88Hurst Color mod slave themes below!

BLUE

DARK PURPLE

GOLD

ORANGE

PURPLE

RED

_______________________

BPereira icon packs for iNZTHD below

Link iNZTHD Icons here!

Link iNZTHD Alt. Color Icons here!

_______________________

Customizing Neo LockScreen 101

So, as you guys could probably tell, the Neo LockScreen that was released several days ago has a LOT going on. Every aspect of the theme has been animated and most aspects have been blended and masked. As busy as this theme appears, it was all made possible only by 12 images. It could’ve been as few as 8, but I separated some elements for more opportunity for customization without having to have a lot of HTML experience.

I’m going to separate the theme into elements and then I’ll go into detail on how to customize them either via HTML5/CSS3 or Photoshop. I’ll start off with the bigger elements and work my way down.

Background

The background image is fetched from the user-selected SpringBoard wallpaper – again, mimicking an aspect from the earlier iNitsua NeoStyle theme. You can have your own designated Background image by dropping an image labeled “Background.png” into the images folder. It is recommended that the image ratio be 3:5 (320x480px, 640x960px, etc). If the image ratio is NOT 3:5, the image will just be stretched width-wise, cropping the top and bottom of the image.

The background moves left to right in a short distance with an ease-in and ease-out calibration to the animation. This aspect can be customized in Config/LockScreen.css file under the #background and @-webkit-keyframes Background_Animation families. The keyframes determine the distance of the movement whereas the –webkit-animation codes under #background determine the duration and details of the animation.

It is recommended to use wallpapers with skewed or diagonal lines to achieve the full effect of the scrolling wallpaper.

Floating Logo

This is the scrolling (back and forth) “N” image default in the lockscreen. There are two images associated with this element: Floating_Logo.png and Floating_Logo_Static.png. These are huge images and are that way so they look crisp on the retina display (width of 1432 px). In order to create a static image, take your custom “Floating_Logo.png” image in photoshop and apply the following filter: Conte` Crayon, foreground level (11), background level (7), canvas texture, scaling 100%, relief (4), light (top), non-inverted. Of course, this is only the baseline (and I’m sure the default for the filter itself), so you can manipulate these values to your liking.

The same animations properties regarding the background apply to this element as well.

Title “iNitsua Z”

Although this theme is more known as Twilight than anything else, it is under the “iNitsua” moniker, lol. This aspect of the theme is the easiest, and was done so on purpose so that anyone with just iFile can truly make this lockscreen their own. If you would like to rename this element, simply open the LockBackground.HTML and search near the bottom the div “Name” and under that “Name_Typography”. Just change “iNitsua Z” to anything you like: your name, your nickname, hateful messages to Justin Bieber – your choice ^_^.

Logo “TWILIGHT”

One of the most asked about customization. Most of you know that in order to change the graphic “TWILIGHT”, all you need to do is to replace the “Logo_Type.png” in the LockScreen folder. Easy right? Not so fast, what about the animation? Well, here’s the problem. The animation was made and designed SPECIFICALLY for the width and number of characters the title “TWILIGHT” has (which is 8 characters total). So what do you do? A) Find a way to split up the logo into 8 or fewer parts. B) Customize the webkit masks for EACH letter. The code you want to look at for this is in the LockScreen.css file under the Config folder. Find the families “Logo_Type_?”, there should be 9 of them, 1 for each letter and the whole graphic. Under that family should be a code that looks like this:

-webkit-mask-image: -webkit-gradient(linear, left top, right top, from(transparent), to(transparent), color-stop(0.11, transparent), color-stop(0.12, black), color-stop(0.31, black), color-stop(0.32, transparent));

Now, the way this mask works is the same way a gradient style works in Photoshop. There are 4 numbers that you need to pay attention to; these numbers correspond to how the gradient is “drawn”. Let’s start from the left so you get a better idea (and learn something new, lol). –WEBKIT-MASK-IMAGE means that whatever follows this code will be used to mask the element, which in this case is the LOGO_TYPE.png image. You can use an image to create masks in which case you just state the URL of the image, but why do that when you can just write code, right? Lol. LINEAR corresponds to what kind of gradient. LEFT TOP, RIGHT TOP refers to what direction the gradient is going – in this case it is moving from left to right. Next few codes are details about the gradient. A simple gradient is “from(??????), to(?????)”, but in this case we are being more specific. We want to completely cut out areas of an image without having to make separate images for each element/animation. COLOR-STOP codes are codes that designate where the previous color ends and what color begins, all in gradient fashion. The top code can be read as this: The gradient starts from transparent and ends in transparent. In between, at 11% of the way through, the gradient remains completely transparent but quickly tapers to BLACK at 12%. The gradient remains completely black until 31% and quickly tapers to transparent at 32% which, as stated earlier it ends in transparent.

It might be easier to have rewrote the code as:

-webkit-mask-image: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(0.11, transparent), color-stop(0.12, black), color-stop(0.31, black), color-stop(0.32, transparent), to(transparent));

So that you can see it from left to right, start to finish. The order in which you write these codes don’t matter, but SYNTAX matters IMMENSELY so make sure you place the commas and parentheses in the right areas.

This animation is repeated for each letter and then for the whole word, so for each letter you will need to customize the gradient so that ONLY that letter shows up. This requires a lot of guess and check. You can also create a gradient in Photoshop and test it out there to get the percentages.

The graphic itself was made with a simple reflecting gradient from transparent to white with a standard drop shadow at 90 degrees. A PSD will be provided in the future to create your own.

Wrap-up

Okay, this is already getting pretty wordy and I can already see you guys got the hang of this lockscreen so I'll skip the rest of the elements unless they are heavily requested. The lockscreen will undergo one more update but the graphics will mainly stay the same. The rest of the images are simple replacement images and no coding is really necessary for your desired effect. To make a custom default image (as opposed to selecting one from the camera roll as your lockscreen wallpaper), drop the image into the Images folder and label it as “Default.png”. A slideshow will be coming in the near future as well as animated springboards and widgets, not to mention official color mods by the Z-master himself. The theme is getting more exciting every day and it doesn’t seem to be letting up at all.

Thanks for sticking this theme. It’s been a privilege for both Z and myself to create it and see you all enjoy it so well.

- Austin

[k.nitsua]

50% OFF SALE:

Theme is on sale (1.49 USD) for a limited time only in honor of K.Nitsua's upcoming wedding. Sale ends 2/27/11

[stevesin]

wow. that looks awesome. will you being doing color mods too?

[FiVe5tArPlAy3r]

Very NICE Z & K, Job well done guys!

[Jmataska]

Effin Stoked Z. Looks sick!!!

[metaserph]

Stunning, as always! Another must-have.

[blast123]

omg yes!!!! finally

[dc71295]

I'm hoping to pump out an icon in the next day or so. Have to do clinical research all day today and then do my clinical rotation tomorrow... It's hard for me to focus with this looming on my mind >_<!

Obviously, there is a high expectations for the HTML aspects of the theme, and I really hope I don't disappoint!

- Austin

K, you disappoint? never!!!! we all know it's going to be great whatever it is! no disappointments from you sir

[zausser]

wow. that looks awesome. will you being doing color mods too?

The plan is to have a few color options but Not sure yet.

[zatcha1980]

This is what I have been waiting for. Cant wait for the initial release.

[mewking]

The plan is to have a few color options but Not sure yet.

estimated release date?

[eFXx]

well well well, the long awaited preview. i think it SUCKS!!!



sucks that we have to wait any longer to get this!!!!!! I need this like a drug addict!! INJECT ME Z!!!!!

[88hurst]

well well well, the long awaited preview. i think it SUCKS!!!



sucks that we have to wait any longer to get this!!!!!! I need this like a drug addict!! INJECT ME Z!!!!!

LOL! I agree, beta time!

[ReBourne]

another awesome theme master z

[Yugo]

Very nice ,i like it !

[iphonerookie]

ETA? Lol I wanna see the iconsssss:-) awesome work Z. You know I went nuts over that color the first time around, it's gotta look awesome on ip4!:-)

[The_13th_Plague]

Steve and Austin - Simply amazing work guys, this is a must have theme! The button style is absolutely stunning, truly looks 3D.

Best of luck to you both in this collaboration!

Jim

[jokerg7]

omg cannot wait for this. looking quite sophisticated yet elegant. love it

[AnthonyGiola]

I'm hoping to pump out an icon in the next day or so. Have to do clinical research all day today and then do my clinical rotation tomorrow... It's hard for me to focus with this looming on my mind >_<!

Obviously, there is a high expectations for the HTML aspects of the theme, and I really hope I don't disappoint!

- Austin

Hurrah! Hurry those icons up! Really cant wait to do some beta for this

[iM7mAsRy]

Damn. It looks so sick I love the colors and the effects. Good job Z. How about the icons is it gonna be like the old twilight ? I like the twilight neostyle icons though.It was my favorite theme in my 3Gs
Thanks Z , gud job bro