• 男子过收费站缴费工具亮眼 众网友被逗乐 2019-09-17
  • 大智慧被证监会立案调查 涉嫌信息披露违规 2019-09-17
  • 苏宁苦追的神锋将来中超!身价超5千万的他似卡卡 2019-09-16
  • 难民救援船将抵达西班牙 2019-09-16
  • 两个第一、两个第二!来大洋网有你好看 2019-09-13
  • 女大学生“裸条”借贷背后:牌照未至 巨头已各占山头 2019-08-26
  • 村教扶智,幕天在行动:“千城万区助村教”行动走进北京、泉州等全国各地城市 2019-08-21
  • 土地红线不断的下降,农民却越吃越饱,中国农民是一只神的力量,会魔法 2019-08-16
  • 湖州南浔:“文体惠民”送进村 2019-08-03
  • 人工智能:新技术的“双刃剑” 2019-08-01
  • 奋力开创老区改革发展新局面 2019-08-01
  • 中国风水井坊:当“非遗”遇上时尚 2019-07-11
  • 本溪“6·5”事故原因公布 国务院安委会挂牌督办 2019-07-08
  • 证监会启动专项执法行动 打击五类行为 2019-06-28
  • 银行业、从柜员到保安、已经是失业状态了。技术已经没有问题、要与支付宝、理财竞争就必须降低成本、涨利息。 2019-06-25
  • 3d大小形态走势图连线:Creating parallax images

    Introduction

    If you're not already familiar with parallax images then the best way to understand them is to view one, take a look at the parallax image featured in this tutorial from?José Julián Londo?o Calle.

    Parallax images are made up of up to 6 layers. When a user moves their mouse over the image, the layers each move at different speeds along the X, Y, or Z axis in order to create the illusion of each layer being a different distance from the camera.

    In this tutorial we're going to show how you can generate parallax images from existing artwork to give them a new dimension.

    What makes a good parallax image?

    In our experience almost any image can be made into a parallax image, but some definitely work better than others:

    • Images with features at 2 or more distinct distances from the camera make the most of the parallax effect
    • With the exception of the background layer all the other layers in a parallax image need some transparent pixels to allow layers below them to be seen. Images that have been flattened can be difficult to work with as each layer has to be painstakingly cutout. Picking an image where you still have access to manipulate (hide and show) layers or a 3D render where you're able to render each layer separately is an easier option
    • To allow the layers within the image to move you need the layers to be larger in size than the viewport you define, how much larger depends on the amount of movement, so make sure you pick an image large enough to acwww.zpfl.netmodate your viewport and desired movement

    Preparing your image

    The first task in preparing your image is to identify the different layers. In this tutorial well be using an image from artist?José Julián Londo?o Calle,?take a look at the image below where we've identified and outlined the different layers we want to use.

    Identifying the layers within the image that will make up the parallax effect

    Including the background (www.zpfl.netposed of the sky and distant ocean) 5 layers have been identified in total; each of them represented by a different outline color. You might notice that the 2 most foreground layers have been identified as separate layers (blue and red) even though they are technically at the same distance from the camera, splitting the layers out like this gives us a bit more flexibility when they're at the edge of the viewport as you'll see a little later on.

    Cutting out the layers

    Each layer now needs to be separated out and saved as an image. With the exception of the background image all the other layers must be saved out in a format that supports transparency. In most cases this means PNGs as these support alpha, the alternative is to use GIFs which also supports transparency but not alpha, meaning they tend to produce edges that look sharp/jagged and can produce artefacts when moving along the Z axis. Unlike PNGs, GIFs do support animations which can add another dimension to your image.

    The slideshow below shows the result of cutting out each of the layers from our image:

    Background layer

    Far building layer

    Near buildings layer

    Foreground left layer

    Foreground right layer

    Tip: For the foreground layers you'll see there's a certain amount of feathering around the scenery, this is one of the reasons why it's easier to work with images that haven't been flattened.

    Creating a parallax image

    Now that we have each of the layers saved out in a separate image we can create our parallax image. Start by visiting your profile page, clicking on the upload button and selecting the parallax image option from the upload menu.

    Having selected the parallax image option you'll see the (hopefully by now) familiar upload interface. Unlike uploading a single shot or slideshow, parallax images require you to upload a preview image that will be displayed in the card and pop-up view, for this we rewww.zpfl.netmend that you upload the full image www.zpfl.netposition (and remember to use the crop tool to select your ideal crop).

    Uploading and ordering your layers

    At the bottom of the page is the image upload widget for the layers. Either drag and drop your layer images on to the widget or click the widget and select them in the file browser that appears. Once you've uploaded your layers it's important that you check they are in the correct order, background to foreground, if you need to change the order click on a layer thumbnail and drag it to a new position within the other layers.

    Uploading and ordering your layers

    Tip: You might have noticed that the transparent areas within the layer preview thumbs appear black. That's okay, it is a side effect the thumbs being saved as JPEGs and it has no impact on the final image.

    Configuring the viewport, axes and layers

    The most important step, (and perhaps the most tricky), in creating a parallax image is configuring your images behaviour. Remember parallax images are interactive, as a viewer mouses over the image the layers move independently along the X, Y and/or Z axes to create the illusion of depth. In order to achieve this illusion we need to;

    • configure the viewport's size
    • link the mouse movement to the relevant axes within the image
    • and position and set the amount of movement of each layer

    To configure the image start by selecting the preview button located at the bottom right of the page.

    After selecting the preview button a full view preview of your image will be displayed. The layers may appear to be out of position; the viewport size will be set to that of the background layer (so will probably be oversized) and when you mouse over the image nothing will happen - all this is to be expected as we haven't set any of the configuration options yet.

    Parallax images are configured using the preview window

    In the image above you can see a toolbar at the bottom of the window, this wont initially be visible and you'll need to scroll down to reveal it. Using the tools within the toolbar we'll be able to configure the behaviour of the parallax image. We'll start by running through what each tool does.

    Layer select tool

    The layer select tool allows you to specify which layer you are configuring. Some configuration options apply to the whole image whereas others only apply to the currently selected layer. Initially the first layer (our background layer) is selected. Click on any of the other numbers to select a different layer.

    Move layer tool

    The move layer tool?allows you to change the initial position of the currently selected layer. When the tool is on transparent pixels in the currently selected layer will be tinted red and all other layers will be static. To move the layer click anywhere within the image and then drag the layer to a new position.

    When the move tool is off the image will return to the preview state and behave as configured.

    Set layer movement tool

    The set layer movement tool allows you to define how much the currently selected layer will move along its? axis relative to the movement of the mouse. The distance for the X and Y axis is given as a percentage of the viewport width and height respectively. For example, given a viewport 1,000 pixels wide, if we set the value of X to 10% then when the viewer's mouse is positioned far left the layer will appear -100px from it's initial position and when positioned far right it will appear +100px from it's initial position.

    If the X or Y movement of the mouse is linked to the Z axis then the percentage given is applied as scale, for example if the Y mouse movement is linked to the Z axis and the value of Y is 10%, then when the viewer's mouse is positioned at the top of the viewport the layer will appear at a scale of 0.9 (90%), and when positioned at the bottom of the viewport the layer will appear at a scale of 1.1 (110%).

    Tip: Start with distance values between 1-10% and then adjust in small increments. Higher values can be a little disorientating initially.

    Tip:?Make sure you check each layer's position when the mouse cursor is at each edge of the image, if a layer has a cropped edge and this is visible when the mouse is position at one edge of the image it will somewhat ruin the illusion.

    Viewport size tool

    The viewport size tool allows you to set the size in pixels of the parallax image. In most cases the viewport will be smaller in size than the layers themselves to allow them to move within the viewport and not reveal their edges.

    Axes tool

    The axes tool allows you to link the movement of the user's mouse to an axis in the parallax image, where:

    • X axis moves layers within the image horizontally
    • Y axis moves layers within the image vertically
    • Z axis scales layers within the image giving the impression that they are moving closer or further away from the camera

    Putting it all together

    The following video runs through the configuration of the parallax image in this tutorial. Remember there's no one way to configure a parallax image, and each image is different, so allow yourself a little time to experiment with the different options.

    Parallax images are a new feature of the 3dtotal website and we're really excited to see what's possible when put in the hands of our talented www.zpfl.netmunity of artists.

    Fetching www.zpfl.netments...

    Post a www.zpfl.netment

  • 男子过收费站缴费工具亮眼 众网友被逗乐 2019-09-17
  • 大智慧被证监会立案调查 涉嫌信息披露违规 2019-09-17
  • 苏宁苦追的神锋将来中超!身价超5千万的他似卡卡 2019-09-16
  • 难民救援船将抵达西班牙 2019-09-16
  • 两个第一、两个第二!来大洋网有你好看 2019-09-13
  • 女大学生“裸条”借贷背后:牌照未至 巨头已各占山头 2019-08-26
  • 村教扶智,幕天在行动:“千城万区助村教”行动走进北京、泉州等全国各地城市 2019-08-21
  • 土地红线不断的下降,农民却越吃越饱,中国农民是一只神的力量,会魔法 2019-08-16
  • 湖州南浔:“文体惠民”送进村 2019-08-03
  • 人工智能:新技术的“双刃剑” 2019-08-01
  • 奋力开创老区改革发展新局面 2019-08-01
  • 中国风水井坊:当“非遗”遇上时尚 2019-07-11
  • 本溪“6·5”事故原因公布 国务院安委会挂牌督办 2019-07-08
  • 证监会启动专项执法行动 打击五类行为 2019-06-28
  • 银行业、从柜员到保安、已经是失业状态了。技术已经没有问题、要与支付宝、理财竞争就必须降低成本、涨利息。 2019-06-25
  • 中国足彩网波胆 山东十一选五走势图网易 2019平特乾坤卦推荐123 福建时时彩号码表 河北十一选五开桨结果 彩票代购平台 甘肃快三开奖网站 11选5选号技巧 克里斯丁蛋糕价目表 山东十一选五技巧大全 三公怎么玩才能赢钱 冰球规则死球 体彩世界杯怎么投注 北京快乐8五行骗局 快乐十分摇奖机下载