GB2354923A

GB2354923A - Web-site editor

Info

Publication number: GB2354923A
Application number: GB0008253A
Authority: GB
Inventors: Charles Clement Moir
Original assignee: Zyris PLC
Current assignee: Zyris PLC
Priority date: 1999-04-06
Filing date: 2000-04-04
Publication date: 2001-04-04
Also published as: GB0008253D0; GB9907806D0

Abstract

A method and apparatus for manipulating an image, for example a web site. A particular graphical element of the image is selected (for example a link, logo or button) and modified by a user. The device then locates similar graphical elements and modifies them in a corresponding manner. This means that a user modifying one element will not disturb the "themed" appearance of the image.

Description

2354923 DISPLAY IMAGE MANIPULATION This invention relates to display image

manipulations, for example, to the creation and editing of Internet pages._ Professionally designed web pages almost always consist of a collection of related graphic or design elements. For instance a heading graphic will typically be related to the design of other graphic elements such as link buttons, logos, etc. Similarly graphic elements are often repeated, for example a button, or graphic divider will often be repeated more than once on a page. In other words there is a design theme for the web page or web site. Similarly, good web design often includes light or darker shades of the lo same colour, which gives more design consistency than using different or completely unrelated colours.

There are existing web theme systems, but they are typically simple and fixed or static. In other words, users can select from a pre-designed set of graphic elements to give their page a more professional designed look. However, because the theme elements consist of fixed static GIF or JPG files, the user has no ability to alter theme characteristics such as colour or texture.

A first aspect of the present invention provides image manipulation apparatus comprising: a user input receiver for receiving user inputs including those indicative of a user selection of a graphical element, as a user selected graphical element, and a user modification in a characteristic of said graphical element in an image being manipulated; a modifier operable to modify said characteristic of said graphical element in dependence upon said user modification to generate a modified graphical element; a graphical element identifier operable to identify graphical elements, as related graphical elements, within said image that are related to said modified graphical element; wherein at least one of said related graphical elements is non-identical to said user selected graphical element; and said modifier is operable to modify corresponding characteristics of said related graphical elements in a manner dependent upon said user modification.

The apparatus of the present invention recognises the problem of the complexity of designing a graphical image from scratch and the inability if using pre-designed graphics elements in the image of tailoring various characteristics of these elements to I provide a more homogeneous image, wherein the graphical elements all have a similar style. It addresses this problem by providing an apparatus which, following the selection and modification of a particular element by a user, can intelligently recognise related elements and can automatically modify corresponding characteristics of these elements in a manner dependent upon the user modification. This means that if the user were to wish to change say the colour of one of the elements in the image, then the apparatus can automatically change all related elements having a corresponding colour. This results in the homogeneous character of the image being retained.

Although the characteristic may be the font or font size of some piece of text, the io invention is particularly suited to embodiments in which the characteristic subject to user modification is a non-textual characteristic.

In preferred embodiments, the graphical element identifier is operable to identify graphical elements related to said modified graphical element by detecting a design relationship between said characteristic being modified and characteristics of other graphical elements in accordance with predetermined design relationship rules, said related graphical elements being those that possess at least one characteristic having a design-relationship with said modified characteristic in accordance with said predetermined design relationship rules; said modifier being operable to modify said related graphical elements in order to maintain said design-relationship across said image.

Thus, embodiments of this invention introduce the concept of themes that are not static, but can be tailored by the user, and wherein the apparatus is intelligently able to determine the design-relationship between design-elements and maintain this relationship across the image, when the user alters some graphical elements or characteristics thereof In one embodiment at least one predetermined design relationship rule is a global design relationship rule applied by said graphical element identifier to all potentially related graphical elements within said image in order to detect said related graphical elements in dependence upon detected characteristics of said related graphical elements.

The advantage of having a global design relationship rule is that as it applies globally it requires little storage space and furthermore, is easy to amend. Thus, in some embodiments it is possible for a user to edit the global design relationship rule, such that 2 different user specified design relationships can be implemented. This gives the user increased design choice without losing the therned aspect of the image.

In another embodiment at least one predetermined design relationship rule is an embedded design relationship rule whereby tag data associated with said graphical elements within said image indicates which of said graphical elements are related by said design relationship.

Using tag data associated with graphical elements means that the speed of identification of the related elements can be increased.

Although in some embodiments the corresponding characteristics are the same as the user modified characteristic, in other embodiments at least one of said corresponding characteristics is not identical to said user-modified characteristic. This leads to a great deal of flexibility in the modifications that can be implemented.

In preferred embodiments the image manipulation apparatus further comprises output means operable to output to a user a confirmation request requesting confirmation for the modification of all said related graphical elements; wherein said modifier is operable to modify corresponding characteristics of said related graphical elements only in response to a confirmation input received via said user input receiving means.

More preferably said output means is further operable to output to a user confirmation request for the modification of each related graphical element; wherein said modifier is operable to modify corresponding characteristics of each related graphical element only in response to a confirmation input for each related graphical element received via said user input receiving means.

By making the machine generated changes subject to user confirmation, the user can choose which, if any, of the related elements he wishes to modify or alternatively he can choose in one step to modify them all. This has the advantage of increasing user choice in image design.

Advantageously, the image manipulation apparatus further comprises a master file store operable to store a master file comprising details of the original image prior to manipulation. Preferably, the output means is operable to revert to said image specified by said master file in response to a revert request received by said user input receiver.

One advantage of this is that the user can start all manipulations again if he decides that he doesn't like the changes already done.

In preferred embodiments said image to be manipulated comprises a page of a web site and said graphiafelement identifier is operable to identify said related graphical elements within said page of a web site. Advantageously the image comprises a web site as a whole.

The design of professional looking web sites with good graphics and a homogenous look with a theme running throughout is desirable but can be time consuming. Embodiments of the present invention provide a way of manipulating either a page of the web site or the entire web site to provide a therned image with corresponding characteristics of related elements being intelligently found and modified in response to user element selection and modification.

The benefits of embodiments of this invention are that non-expert users, who have no artistic design knowledge or skill can customize or tailor the appearance of a web page and that the design relationships between various parts of the web page are maintained. In other words users are not limited to fixed or static design themes, and altering some aspects of the page design will affect others to ensure a more consistent, professional look to the web page or site.

The image manipulation apparatus of embodiments of the present invention is operable to modify a variety of different graphical elements, in particular any one of the following: a link button, a logo, and a graphics divider.

In some embodiments the characteristic to be modified can be any characteristic of the graphical elements, but preferably it comprises at least one of the following: colour, shade of colour, texture, font, font size, button width and graphic type.

In preferred embodiments the characteristic is a colour, said related graphical elements contain a hue of said colour and said modifier is operable to maintain a predetermined relationship between said colour subject to said user modification and said hues of said colour within said related graphical elements.

In this way all elements comprising any shade of the colour are amended in a way dependent on the user modification, while retaining their shade relationship. This enables 4 the theme of the web site to be retained with the shade relationship of the modified colour being that of the shade relationship of the colour prior to modification across the image.

Although the image manipulation apparatus can comprise a stand-alone computer in preferred embodiments it comprises a server operable to be connected to a network.

Advantageously it further comprises a computer connected via said network to said server, said computer comprising a display for displaying said image being manipulated and user input means.

In accordance with a further aspect of the present invention there is provided a method for manipulating an image comprising the steps of. receiving a user input io including a user selection of a graphical element, as a user selected graphical element and a user modification to be performed on a characteristic of said user selected graphical element in an image being manipulated; modifying said characteristic of said graphical element in dependence upon said user modification to generate a modified graphical element; identifying the graphical elements within said image related to said modified graphical element, as related graphical elements; wherein at least one of said related graphical elements is non-identical to said user selected graphical element; and modifying corresponding characteristics of said related graphical elements in a manner dependent upon said user modification.

In accordance with a yet further aspect of the present invention there is provided a computer readable medium comprising a program recorded thereon, said program being operable to control a data processing apparatus to perform a method as set out above.

In accordance with a further aspect of the present invention there is provided computer for coupling to a server computer via a network link, said computer being configured to transmit user inputs made at said computer to said server computer to control said server computer to perform a method as set above.

Embodiments of this invention provide display image manipulation apparatus comprising a user input receiver for receiving a user input indicative of a change in a characteristic of an element in an image being manipulated, a parser for scanning elements forming said image to identify elements related to said element changed and means for modifying said related graphical elements in a manner dependent upon said change in said characteristic.

Embodiments of the present invention will now be described, by way of example only, with reference to the accompanying drawings in which:

Figure I illustrates an apparatus according to one embodiment of the invention; Figure 2 illustrates a flow diagram giving an outline of the steps performed by an image manipulation apparatus according to an embodiment of the invention; Figure 3 illustrates one embodiment of the identify related element and modify related element steps of Figure 2; Figure 4 illustrates an alternative embodiment of the identify related element and i o modify related element steps of Figure 2; Figure 5 illustrates a flow diagram showing how a colour characteristic of a selected element and related elements can be modified according to an embodiment of the invention; and Figure 6 illustrates a flow diagram showing modification of a page or several pages of a web site according to an embodiment of the invention Figure I schematically illustrates a computer system according to an embodiment of the present invention. The computer system comprises a client computer having a CPU 3) 0, a user input means 10, which traditionally comprises a keyboard and/or a mouse, and a display 20. This client computer is connected via a network such as the internet to a server 70. The server comprises a user-input receiver 40, a graphical element identifier and a modifier 60 (these elements taking the form of appropriate software modules/routine for controlling operation of the server 70).

Techniques of embodiments of the present invention can be implemented using a computer program stored on a computer readable medium to control a general purpose computer, such as the client computer 10, 20, 30 or the server computer 70. In one embodiment the computer program for performing embodiments of the invention can reside upon the server computer 70 with a user passing control to the server 70 via a normal intemet browser run by the client computer. The server computer 70 has the processing resources and template libraries necessary to produce a wide vitriety of graphics data in an efficient manner.

6 Figure 2 shows schematically how the server 70 of Figure I functions as an image manipulation apparatus according to an embodiment of the invention. User inputs specifying a user selection of a graphical element and a desired modification in a characteristic of that element are received at the user input receiver 40. The modifier 60 then modifies this selected element in the manner requested by the user. The graphical element identifier 50 then identifies graphical elements within said image related to said modified element and the modifier modifies these elements in a manner that depends on the user modification. This ensures that the image maintains a homogenous, themed look. The modification and identification steps could be re-ordered.

The identification of the related graphical elements can be done in a number of ways. Figure 33 illustrates one of these ways. In this embodiment the server detects predetermined global design relationship rules that may be stored somewhere on the server 70. It then identifies the characteristics of a next graphical element, which can be located anywhere in the image depending on the scanning process being used, and looks to see if any of the characteristics of this graphical element are related to the modified characteristic by the design relationship rules. If any are then it modifies this element in such a way that the design relationship is maintained across the image.

An alternative way of identifying related elements is schematically illustrated in Figure 4. Here the graphical elements include embedded tag data that indicates which graphical elements are related. Thus, in this embodiment, related graphical elements can be found by analysing the tag data of the individual graphical elements. Graphical elements having tag data related to the tag data of the user modified graphical element are identified as being related graphical elements. Modifications corresponding to the user modification are then performed on these elements.

Figure 5 illustrates a specific example where the characteristic to be changed is colour. Colour is an example of the flexibility of the technique because the system does not just scan for a particular RGB colour, but for any shade of given hue. In other words, if the user is altering a green colour and making it red, it scans all elements on the page for all shades (i.e. lighter or darker shades of green) by comparing colours using the HSV or HLS colour system, and replacing them with the corresponding shades of red. This 7 ensures that design elements that are various shades retain their shade relationship, no matter what hue is chosen.

The flow diagram of Figure 6 illustrates a flow diagram showing amendment of a web page. In this embodiment the user alters a page element or characteristic of a page element on the web site and then chooses to change all related elements on the page. The elements on the page are then scanned until the end of the page is detected. A further page may then be scanned if required. Following this each element on the page, or where necessary the master file for this graphic element, are examined and it is determined if the altered characteristic affects that particular element or not. If it does the element is io modified or the graphic element using text from the master file is recreated where appropriate.

Embodiments of this invention assume that each graphic on the page must be associated with a 4master' file that can re-generate the required graphic. It is assumed this is some vector form or other form of graphic where the component parts of the graphic such as the text and colours are definable. It also assumes that mechanisms are in place to query or to know the values of components or characteristics of these files. For instance the colours, fonts or textures used in the file, so that characteristics can be compared from one graphic to another.

The association between the actual graphic on the web page and the 'master' file that creates it could be implemented in a number of ways such as having a separate table or by embedding tags into the HTML or just by a file naming convention, e.g. a heading graphic called heading.gif could have a master file called heading.cgm In some embodiments the users are given the choice as to whether they modify all related graphical elements, just the item being edited or the choice can be given for each possible modification. The examples and flowchart given above assume the user has selected to alter all affected page elements since that is the difficult case.

In most cases the relationship between the design characteristics is implicit in the page design, i.e. there does not need to be a special explicit relationship between certain elements. So, for example, the simple fact that a colour or shades of a certain colour are used in many places on the page defines the relationship between those various elements.

8 In some cases however there would be a specific, predetermined relationship that is stored in global design relationship rules or is indicated by embedded tag data. in the case of a vertical and horizontal divider, then it is predetermined that altering one of that specific type of graphic may affect the other. Similarly the designer may wish to explicitly tie one characteristic of a certain element on the page to that of another, so for example he could ensure that when the width of a button varies, then the width of a horizontal divider is related.

However, a key point is that the user does not need to be aware of the relationship or do anything special. He can just edit certain graphics or characteristics such as colour io and the related page elements all change automatically to retain the design relationship with other elements on the page or web site.

Embodiments of the invention cover a range of different design characteristics such as, but not exclusively, colour and shades of colour, texture, fonts, font size, button widths, graphic types and related graphic types.

When the user alters at least one of these characteristics, the system will scan the page or pages and find all affected graphic elements and re-generate or re-create those elements to take on the new characteristic. Some examples; - When the user alters the design of a graphic button, then all related graphic buttons on the web page would alter to match the new one, while retaining the button text.

- If the user alters the texture used in one part of the page design, then all other parts that use the same texture, should change to take on the new texture. So, for example, if a certain texture occurred on a button design and was also reflected in the web page background, then when one was changed the other would change to match.

- If the user alters the colour of an object then all items that were the same colour or contained the same colour, or various shades (i.e. lighter or darker versions) of that colour, would be recreated to take on the new colour, whilst retaining the shade relationship.

- If the user altered the font used in one part of the page, then all other parts using the same font can be updated automatically (whether it's used on a graphic or text).

9 - If the user selected an alternative design for a horizontal divider then vertical dividers used on the page or web site would alter to match the new design.

- If the user altered the text of one button, that made it longer than before, that was in a column or row of buttons, then all the buttons in that row or column would be re-created to ensure they all matched width-wise.

The process used when the user alters an element or some characteristics of the web page is broadly similar for all page characteristics and is illustrated by the algorithms shown in the Figures. However the details of the implementation for each of the possible Theme characteristics will vary.

When the user alters any page element covered by the SmartTheme system and that means any design characteristics of the page at all - then all the other parts or elements of the page are scanned to see if the change could affect that element.

If it does then the element is altered as appropriate to the change, and if necessary the graphic re-created whilst retaining the original user-text or content.

So to work through some of the earlier examples; Say the user alters the design of a button by selecting an entirely different design from a library of button designs. If the user had chosen to alter all effected elements, then all other buttons based on the same original design would to alter and all related items to this button - which may be other versions of the button, would have to change as well.

Say the user alters the background texture. If this texture is used in other areas on the page, such as within graphics, then this can be determined by examining the master file of the graphic and comparing the texture with that of the background. If it's the same as the old one, then the texture in the graphic should change to be the newly selected one and the graphic re-created for use on the web page.

Another example: Say the user altered the wording on a button on a column. This would alter the button width. Now it is probable that the button width is an explicit design relationship that the designer has specified, and so the page scanner would find other buttons that were marked to the same width (or it could just assume that all buttons in the same column should be the same width) and then re-create the buttons to be the new width, thereby maintaining the aesthetic appearance of all the buttons.

Another example: If the user selected a new font for use on a heading, and this font happened to be used on other parts of the page, perhaps in other graphics, then all these would change to match.

Claims

1. Image manipulation apparatus comprising:

a user input receiver for receiving user inputs including those indicative of a user selection of a graphical element, as a user selected graphical element, and a user modification in a characteristic of said graphical element in an image being manipulated; a modifier operable to modify said characteristic of said graphical element in dependence upon said user modification to generate a modified graphical element; a graphical element identifier operable to identify graphical elements, as related graphical elements, within said image that are related to said modified graphical element; wherein at least one of said related graphical elements is non-identical to said user selected graphical element; and said modifier is operable to modify corresponding characteristics of said related graphical elements in a manner dependent upon said user modification.

2. Image manipulation apparatus according to claim 1, wherein said characteristic subject to user modification is a non-textual characteristic.

Image manipulation apparatus according to any one of the preceding claims, wherein said graphical element identifier is operable to identify graphical elements related to said modified graphical element by detecting a design relationship between said characteristic being modified and characteristics of other graphical elements in accordance with predetermined design relationship rules, said related graphical elements being those that possess at least one characteristic having a design-relationship with said modified characteristic in accordance with said predetermined design relationship rules, said modifier being operable to modify said related graphical elements in order to maintain said 12 design-relationship across said image.

4. Image manipulation apparatus according to claim 3, wherein at least one predetermined design relationship rule is a global design relationship rule applied by said graphical element identifier to all potentially related graphical elements within said image in order to detect said related graphical elements in dependence upon detected characteristics of said related graphical elements.

5. Image manipulation apparatus according to any one of claims 3) or 4, to wherein at least one predetennined design relationship rule is an embedded design relationship rule whereby tag data associated with said graphical elements within said image indicates which of said graphical elements are related by said design relationship.

6. Image manipulation apparatus according to any one of the preceding claims, wherein at least one of said corresponding characteristics is not identical to said user-modified characteristic.

7. Image manipulation apparatus according to any one of the preceding claims, further comprising output means operable to output to a user a confirmation request requesting confirmation for the modification of all said related graphical elements; wherein said modifier is operable to modify corresponding characteristics of said related graphical elements only in response to a confirmation input received via said user input receiving means.

2? 5

8. Image manipulation apparatus according to claim 7, wherein said output means is further operable to output to a user confirmation requests for the modification of each related graphical element; wherein said modifier is operable to modify corresponding characteristics of each related graphical element only in response to a confirmation input for each related graphical element received via 13 said user input receiving means.

9. Image manipulation apparatus according to any one of the preceding claims, said image manipulation apparatus further comprising a master file store operable to store a master file comprising details of the original image prior to manipulation.

10. Image manipulation apparatus according to claim 9 and any one of claims 7 or 8, wherein said output means is operable to revert to said image specified by said master file in response to a revert request received by said user input receiver.

11. Image manipulation apparatus according to any one of the preceding claims, wherein said image to be manipulated comprises a page of a web site and said graphical element identifier Is operable to identify said related graphical elements within said page of a web site.

12. Image manipulation apparatus according to claim 11, wherein said image to be manipulated comprises a web site and said graphical element identifier Is operable to identify said related graphical elements within said web site as a whole.

13'. Image manipulation apparatus according to any one of the preceding claims, wherein said graphical element comprises one of a link button; alogo;and a graphics divider.

14. Image manipulation apparatus according to any one of the preceding claims, wherein said characteristic comprises at least one of colour; 14 shade of colour; texture; font; font size; button width; and graphic type.

15. Image manipulation apparatus as claimed in any one of the preceding claims, wherein said characteristic is a colour, said related graphical elements contain a hue of said colour and said modifier is operable to maintain a predetermined relationship between said colour subject to said user modification and said hues of said colour within said related graphical elements.

16. Image manipulation apparatus according to any one of the preceding claims, wherein said image manipulation apparatus comprises a server operable to be connected to a network.

17. Image manipulation apparatus according to claim 16 wherein said image manipulation apparatus Rifther comprises a computer connected via said network to said server, said computer comprising a display for displaying said image being manipulated and user input means.

18. A method for manipulating an image comprising the steps of:

receiving a user input including a user selection of a graphical element, as a user selected graphical element and a user modification to be performed on a characteristic of said user selected graphical element in an image being manipulated; modifying said characteristic of said graphical element in dependence upon said user modification to generate a modified graphical element; identifying the graphical elements within said image related to said modified graphical element, as related graphical elements; wherein at least one of said related graphical elements is non-identical to said user selected graphical element; and modifying corresponding characteristics of said related graphical elements in a manner dependent upon said user modification.

19. A computer readable medium comprising a program recorded thereon, said program being operable to control a data processing apparatus to perform a method as claimed in claim 18.

20. A computer for coupling to a server computer via a network link, said computer being configured to transmit user inputs made at said computer to said server computer to control said server computer to perform a method as claimed in claim 18.

21. Image manipulation apparatus substantially as hereinbefore described with reference to the accompanying drawings.

22. A method for manipulating an image substantially as hereiribefore described with reference to the accompanying drawings.

23). A computer readable medium substantially as hereiribefore described with reference to the accompanying drawings.

24. A computer for coupling to a server computer via a network link substantially as hereinbefore described with reference to the accompanying drawings.

16