Patent Grant
7746358
The invention relates to the control of layered images during online product design.
Many individuals, businesses, and organizations occasionally have a need to purchase a quantity of custom printed materials, such as business cards, product or service brochures, promotional postcards, personalized holiday cards, birth announcements, party invitations, or any number of other items. Many of these individuals and businesses obtain these products through the web sites of online printing service providers, such as VistaPrint.com operated by VistaPrint Limited.
Online printing service providers, taking advantage of the capabilities of the Web and modern Web browsers, provide document design services for users desiring to create customized documents from any computer with web access at whatever time and place is convenient to the user. These service providers typically provide their customers with the ability to access the service provider's web site, view examples of the types of products offered by the provider, and view images of a variety of pre-designed product templates prepared by the site operator. To give the user a wide range of design suggestions, templates presenting a variety of different styles, formats, backgrounds, color schemes, fonts and designs from which the user may choose are typically presented.
When a user has selected a specific template design to customize, the site typically provides product design tools allowing the user to provide personal information for incorporation into the selected template and, in many cases, to perform other modifications to the template design to create a customized electronic document design. After the user has finished designing the product, the site typically allows the user to place an order for the production and delivery of a desired quantity of printed products to the user's home or business.
Various web-based processes and techniques for allowing a user to customize a product design have been employed. In some prior art applications, all product design inputs from the user, such as the text characters the user desires to appear in the product and the user's selections from menus of color options and font options, are forwarded to the printing service provider server for processing. The server creates the image depicting the product design and downloads it to the user's computer for user review. If the user desires to modify any element of the design, the user must again indicate the desired changes, submit the information to the server and wait for the revised version of the document to be received and displayed. The current state of the product design is retained at the server and, therefore, this product creation approach requires repetitive interaction with, and product image transferring from, the server.
Other printing services providers have opted for downloading a set of software tools to the user's computer that are adapted to execute in the user's browser and provide the user with the ability to perform many WYSIWYG product editing operations in the browser at the client system, such as entering text, changing fonts or font attributes, and resizing, repositioning template elements with little or no interaction with the server in the browser at the client system. Some providers have chosen to implement this type of browser-based design tools using markup language code while others have implemented the tools using Flash authoring software from Adobe Systems Incorporated. With either approach, a significant amount of software code is typically required to implement the wide range of editing functions and the time required to complete the downloading process of the tool set may be considered by some users to be undesirably lengthy.
Downloading a font to a user computer for use by the user's browser tends to significantly increase the delay perceived by the user. Font files tend to be relatively large and, even over a relatively fast network connection, may require a few seconds to download. This delay, even if brief, may lead to user irritation or disappointment. If a user desires to display text in multiple different fonts in the user's product design, the time required to download the multiple different font files will increase accordingly. Users who are impatient or who are interacting with the site over a slow communication channel may opt to abandon the site rather than wait for the full set of tools to complete the download. The loss of these users before they can be engaged in the product design process represents both potential customer dissatisfaction and a potential loss of the revenue to the printing service provider.
In addition, for printing services providers desiring to present a WYSIWYG product design experience to their customers, the lack of a standard browser mechanism for rendering downloaded fonts potentially creates problems in producing a WYSIWYG printed product that faithfully represents the online design viewed and approved by the user. Browser programs from different vendors and even different browser versions from the same vendor may render downloaded fonts in a slightly different manner.
There is, therefore, a need for a system and method of online document design that provides flexible and responsive WYSIWYG editing capabilities while reducing the time required to make the editing tools available to the user at the user's computer.
The present invention is directed at satisfying the need for allowing a user to select and control an image that is positioned beneath another image.
In accordance with one aspect of the invention, a transparent surrogate image of the same size as a first image is positioned above the first image and also above any other image that is covering the first image. The surrogate image is linked to the first image such that user selection of the surrogate image is interpreted as a request by the user to select the first image.
These and other objects, features and advantages of the invention will be better understood with reference to the accompanying drawings, description and claims.
When UCS 100 is operating, an instance of the USC 100 operating system, for example a version of the Microsoft Windows operating system, will be running, represented in
Server 110 provides data storage and processing support for the web site operations of the printing services provider or other entity offering the online product creation service. While server 110 is shown in
In interacting with server 110, a user will typically arrive at the site home page and then navigate through one or more product promotion pages, not shown, displaying examples of the types of products offered by the provider and allowing the user to select a particular product type. Within a product type, the user can review one or more pages displaying thumbnail images of various product design templates available from the printing services provider for the selected product type. The site would typically offer a wide range of different templates with different combinations of layouts, color schemes, font schemes, component images, and so forth. After the user has selected the specific design that the user wants to serve as the basis for the user's creation of a personalized design, an initial product customization screen, including the selected electronic editable template, is downloaded from server 110 to USC 100.
Referring to
In this example of a business card design, text entry fields 201-211 into which the user can enter text are provided. Each text field 201-211 corresponds to a text entry commonly found on business cards. To assist the user in entered the user's personal information, each text entry field 101-111 has an associated text label indicating the type of information suggested for that field. For example, field 201 is indicated as the field for entering the user's company name, field 202 is the field for the user's company message, and so forth. The user is free to enter whatever information is desired in the fields or to leave one or more field empty. When initially displayed to the user, fields 201-211 contain no text. Product customization displays for other types of products would typically provide a different set of text fields with different informational labels corresponding to the type of product being prepared and its anticipated use.
In the template example shown in
To illustrate to the user the location and appearance of the user's information as it would appear in the design, generic default text entries such as “Company Name”, “Message”, “Full Name” and so forth are initially displayed in template 120 using the default font and font attributes associated with the template by the template designer.
Area 240 could also have an image, color field, design, graphic element, paper effect, or other content acting as a background image and appearing beneath the text. It will be understood that template 220 is merely representative for the purpose of discussion herein.
Each text field in area 240 has an associated font color and associated font properties controlling how text entered in the text field will be rendered, including the name of the font family, font style, font weight, and font size (all collectively referred to herein as “font attributes”), that were selected by the template 220 designer as being complementary to the overall content and style of the template.
To provide a range of additional template 220 editing capabilities to the user, edit tool bar 250 is provided. Edit tool bars, as is known in the art, allow the user to control the appearance of text by selecting a different font family and/or varying other font attributes. As an alternate embodiment, instead of presenting tool bar 250 to all users initially, the printing services provider could implement the template edit display 200 such that a user only gains access to the editing capabilities of tool bar 250 at an extra cost or only upon user request.
Each text field displayed in template 220 is rendered as a separate individual image at server 110 and downloaded to browser 105. The position of each text image within template 220 is maintained by design tools 106 at UCS 100 during the design process. In the disclosed embodiment, the component images in template 220 are created and downloaded from server 110 in one of two image formats depending on whether the image has transparency. Component images with transparency are downloaded in PNG format while images not requiring transparency are downloaded in JPEG format, which generally produces a smaller image file. Server 110 is aware of the format of each component image in template 220 and will automatically download the image in the appropriate format without client request.
While template 120 has been designed to yield a pleasing and functional business card containing eleven common business card data entries, some users may have no need for eleven different entries. A user is not forced to make an entry in each test field 201-211 and may choose to leave one or more fields empty. Alternatively, some users may desire to use more than eleven text fields in the product design. These users may select the “Add text box” button on tool bar 250 to cause an additional text box to be added to the template, initially at a default location such as the upper left corner of template 220. The user can then drag the box to the desired location and enter the appropriate text.
Referring now to
Because all necessary font attribute information is received at the server with the user-entered characters from the text field, the server is not required to make memory calls to retrieve prior state information, thereby minimizing the time required to receive the image back from the server. Whenever a user selects a text field 201-211 to edit and initiates entry of any characters, the default text initially displayed in template 220, such as “Company Name”, is removed and replaced with an image of the user-entered characters.
In the disclosed embodiment, a character entry in one of the fields 201-211 does not inherently trigger a transmission to server 110 for a revised text image. Whether one or more than one character entered by a user in the fields 201-211 are uploaded at one time to server 110 for the generation of a new text image depends on the rate at which the user is entering characters into the field. To avoid requiring the server to generate and download many revised images in a very short period of time while text is being entered very rapidly by a fast typist, characters from a text field 201-211 are uploaded to the server only when 350 milliseconds have passed since the last user keystroke. Delay interval periods of more or less than 350 ms could be employed, if desired. Because the file sizes transferred between the user system and the server are relatively small, only a slight delay is experienced between the uploading of the text information to server 110 and the receipt at the user computer of the revised text image.
Rather than use text fields 201-211, some users may desire to approach the customization process by editing text fields directly in template 220. As an alternative to entering text in fields 201-222, the user could individually select and edit the individual text fields in template 220, as will be discussed further below in connection with
As mentioned above, the template designer employed by the site operator selected the initial default font attributes and selected default locations in the template where the text fields would appear, but the user is allowed, if desired, to change any or all of these default elements. To edit the content or position of a text field in the template, the user must first select the desired text box. In the disclosed embodiment, each text box has two states of selection: a first state for the purpose of changing the location and/or size of the text field and a second state for changing the text content and/or font attributes associated with the characters in the text box. To place a text box in the first selected state, the user can position the cursor over the text area in template 220 and click once. To place a text box in the second selected state, the user can position the cursor over the text area of interest and double click.
In
During the product design process, the current state of the template design is retained by design tools 106 at the user's computer, not at server 110. Design tools 106 maintains the position information for all component images of template 220. In the disclosed embodiment, design tools 106 retains the positional coordinates of the upper left corner of each image, such as corner 293 of text image 290, relative to the upper left corner 294 of the template. Whether or not design tools 106 communicates with server 110 in response to a user action when a text image is in the first selected state depends on the particular user action that was performed.
If the user merely performed a drag and drop operation to move a text image from one position to another position in template 220, the size of the text image does not require revision. In this situation, design tools 106 simply retains the new coordinates of the upper left corner of the text image at its new position in template 220. If, however, the user changed a font attribute, or resized the text image container using one of the side or corner handles, there is a possibility that the displayed appearance of the text may be affected. For example, changing a font attribute may cause the length of the text to change sufficiently to cause the text to become wrapped (or unwrapped) within the text box. Similarly, if the user changes the width of the text box, a string of text that was formerly displayed in the box on a single line might require wrapping onto multiple lines or vice versa. Therefore, each time the user performs such an operation, design tools 106 will forward the width of the text image along with the character and font attribute information to server 110. Based on the received information, server 110 will generate and return a new text image of that text for incorporating into template 220 at the user computer. Because the current state of the template design is retained at the user computer during the design process, server 110 need not retain a copy of text images or be aware of the position of the text images in the template design while the design is being created.
In the situation depicted in
As the user is entering or modifying the text in window 295, the user's edits are being sent to server 110 and an updated text image is being automatically received from server 110 and reflected in template 220 using the same process as was discussed above in connection with user edits in fields 201-211 (
At any time that the user is satisfied with the design displayed in template 220, the user can select “next” button 270 to cause design tools 106 to transmit the current design, including all user text, text attributes, and text box positions, to server 110 for storage and move on to another step in the process, such as the placing of an order for the production and delivery of a desired quantity of the printed product.
To provide templates that are relevant and attractive to as broad a range of different types of customers and customer interests as possible, the printing services provider will typically design many different templates containing not only a variety of different layouts, colors, and fonts, but also a wide variety of different images. For example, the provider often incorporates one or more photographs or other images of people, places, animals, or objects for the purpose of indicating a particular business occupation or leisure activity, suggesting a concept, or evoking an emotion. This type of image is referred to generally herein as a “content image”.
In addition to providing tools allowing the customer to enter, edit and position text and to upload, size and position user images as discussed above, the system described herein also provides the user with the ability to modify or replace a component content image in a product design template. Referring to
In the disclosed embodiment, some aspects of image area 230, such as its size and position within template 220, are fixed features of the layout of the template and not subject to user modification. The service provider could, if desired, implement the layout so as to allow user to also exercise some control over these aspects of image area 230.
While a user may perceive an image area in a template, such as image area 230, as containing a single image, what the user is viewing may actually be the result of the combination of multiple separate images. In the template example depicted herein, the service provider has created a visual effect by placing another image, referred to generally herein as a “masking image”, above the content image to alter or enhance the presentation or appeal of the content image. A masking image could be any type of image that totally or partially overlies a content image. For example, a masking image comprised of a geometric vector shape containing a gradient or other fill allowing the underlying content image to be at least partially seen could be employed. Alternatively, one or more geometric elements having some transparent regions and some visible regions could be assembled to create the visual effect that the underlying content image is being presented in a picture frame, viewed through prison bars, seen behind hanging vines, or any number of other visual effects that alter or heighten the style, mood, or appearance of the content image. If the visual effect presented in the template was achieved by the assembly of multiple overlapping shape elements, the server will flatten all of the elements into a single masking image for downloading to the user system. As will be understood by those in the art, the use of geometric vector shapes to create masking images is not essential and other languages, methods or applications capable of generating a Web-compatible image for downloading to the user's computer system could be employed.
To allow a user to initiate a change to the content image, the user must be provided a technique to identify or “select” the content image for editing. Selecting an image is straightforward if the image is readily available by being on top of other image layers that may be present in the template design, but this is not the case where a masking image is positioned above the content image. In this situation, user control over the content image is accomplished through the incorporation of a transparent image, referred to herein as a “surrogate image”, which has the same size and position in the template and is maintained in a linked relationship to the content image. The linking of the content image with the surrogate image provides the user with the illusion that the user is directly selecting content image when in reality the user is indirectly accessing the content image through the user's interaction with the surrogate image.
By way of illustration, referring to
Positioning surrogate image 233 as the top image in this image group provides the user with the illusion that the user is directly selecting and interacting with content image 231. If the user double clicks over image area 230, the user is actually selecting surrogate image 233, but the action is recognized and interpreted by design tools 106 as a desire by the user to select underlying content image 231.
Looking at
At step 604, the user performs an edit operation that will have the effect of altering the appearance of template 220. As discussed above in connection with
When a revised text image is required from server 10, the text characters, the identifiers of the font and font attributes for the text, and the size of the text box containing the text are supplied to server 110 to allow the server to generate and return the image of the text as quickly as possible. Server 110 will create and return a revised image at step 607. Based on the image position coordinates for the component image maintained at the user computer by design tools 106, the revised image received from server 10 will be incorporated into template 220 at the appropriate position.
If the user operation at step 604 does not require the creation of a revised component image at step 605, for example if the user operation was only to click and drag an existing component image to another location without changing the size or content of the image, the template 220 image is updated at step 608 by design tools 106 based on the new image position information with no server involvement.
At step 609, the user can continue with customizing the template by performing another edit operation or can conclude the design session and move on to another step in the ordering process. As discussed above, while a user is editing the individual component text fields in the template 220 design, the template image will be frequently and incrementally updated with revised versions of individual component images to continuously present the user with the most current version of the product design in progress. Steps 604-608 will, therefore, typically be repeated many times during the course of a product design session.
When the user has completed the custom product design and desires to terminate the design session, the user can save the current template design by clicking “next” button 270. In response to next 270, design tools 106 will forward the design description information to server 110 for retention and eventual production of the product by printing or other production process. The design description will include the final position, size, and content information for each component text image in the template design, allowing the template design to be subsequently generated at server 110 for printing or other processing.
While the invention has been shown and described in various exemplary embodiments, the described embodiment is to be considered as illustrative rather than restrictive. For example, the template design being customized could be for a product to be printed on paper or on any other printable medium such as cloth, glass, plastic, rubber, or wood. The design could be for a complete product, or intended to be incorporated into a larger product, such as a section, side, or page. The scope of the invention is as indicated in the following claims and all equivalent methods and apparatus.
| Number | Name | Date | Kind |
|---|---|---|---|
| 5651107 | Frank et al. | Jul 1997 | A |
| 5880740 | Halliday et al. | Mar 1999 | A |
| 5986670 | Dries et al. | Nov 1999 | A |
| 6384840 | Frank et al. | May 2002 | B1 |
| 6891550 | Nolan | May 2005 | B1 |
| 20060232607 | Davignon et al. | Oct 2006 | A1 |
| Number | Date | Country | |
|---|---|---|---|
| 20080158255 A1 | Jul 2008 | US |
