1. zausser's Avatar
    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
    Attached Thumbnails [50% OFF SALE] iNitsua Z Twilight HD/SD-111.png  
    Attached Files
    Last edited by Bo Troxell; 2011-02-22 at 08:45 PM.
    2010-11-07 03:53 PM
  2. k.nitsua's Avatar
    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
    Last edited by k.nitsua; 2011-02-22 at 05:38 PM.
    #eli7e revived me
    2010-11-07 06:03 PM
  3. stevesin's Avatar
    wow. that looks awesome. will you being doing color mods too?
    2010-11-07 06:03 PM
  4. FiVe5tArPlAy3r's Avatar
    Very NICE Z & K, Job well done guys!
    2010-11-07 06:03 PM
  5. Jmataska's Avatar
    Effin Stoked Z. Looks sick!!!

    WRECK 'EM TECH!!! Twitter Me: Jared_Mataska
    Or Leave a Thanks...
    2010-11-07 06:06 PM
  6. metaserph's Avatar
    Stunning, as always! Another must-have.
    @Metaserph
    "You can only attain Peace through spreading Love to create Unity and earn the Respect of others" - Complex Simplicity
    2010-11-07 06:08 PM
  7. blast123's Avatar
    omg yes!!!! finally
    2010-11-07 06:09 PM
  8. dc71295's Avatar
    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
    2010-11-07 06:14 PM
  9. zausser's Avatar
    wow. that looks awesome. will you being doing color mods too?
    The plan is to have a few color options but Not sure yet.
    2010-11-07 06:15 PM
  10. zatcha1980's Avatar
    This is what I have been waiting for. Cant wait for the initial release.
    2010-11-07 06:16 PM
  11. mewking's Avatar
    The plan is to have a few color options but Not sure yet.
    estimated release date?
    2010-11-07 06:19 PM
  12. eFXx's Avatar
    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!!!!!
    2010-11-07 06:23 PM
  13. 88hurst's Avatar
    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!
    2010-11-07 06:24 PM
  14. ReBourne's Avatar
    another awesome theme master z
    2010-11-07 06:26 PM
  15. Yugo's Avatar
    Very nice ,i like it !
    2010-11-07 06:28 PM
  16. iphonerookie's Avatar
    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!:-)
    2010-11-07 06:30 PM
  17. The_13th_Plague's Avatar
    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
    2010-11-07 06:34 PM
  18. jokerg7's Avatar
    omg cannot wait for this. looking quite sophisticated yet elegant. love it
    2010-11-07 06:59 PM
  19. AnthonyGiola's Avatar
    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
    2010-11-07 07:24 PM
  20. iM7mAsRy's Avatar
    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
    2010-11-07 07:29 PM
26,159 12311511015011001 ...
LINK TO POST COPIED TO CLIPBOARD