A webpage generating method includes: obtaining a size of an original design file and layer information of a layer included in the original design file; obtaining a material included in the layer; and generating a webpage according to the size of the original design file, the layer information of the layer, and the material included in the layer.
Legal claims defining the scope of protection. Each claim is shown in both the original legal language and a plain English translation.
1. A webpage generating method, comprising: obtaining a size of an original design file, wherein the size includes display dimensions of the original design file; obtaining a level of each layer folder comprised in the original design file, and combining all layers comprised in layer folders levels of which are greater than a preset value into one layer; obtaining layer information of a layer comprised in the original design file in which all the layers comprised in the layer folders, the levels of which are greater than the preset value, are combined into one layer; obtaining a material comprised in the layer; and generating a webpage according to the size of the original design file, the layer information of the layer, and the material comprised in the layer; wherein obtaining the material comprised in the layer comprises: determining whether a type of the layer is text layer or image layer, wherein in response to determining that materials comprised in the layer is all text content, determining that the type of the layer is the text layer, and in response to determining that the materials comprised in the layer comprises both image materials and text content or comprises all image materials, determining that the type of the layer is image layer; obtaining text content comprised in the layer in response to determining the type of the layer is text layer, and determining that the obtained text content is the material comprised in the layer; and taking a screenshot of a smallest area comprising all materials comprised in the layer in response to determining the type of the layer is image layer, obtaining the screenshot corresponding to the layer, and determining that the screenshot is the material comprised in the layer.
The method converts a layered design file (e.g., PSD) into a webpage by first determining the overall display dimensions of the design. It simplifies the layer structure by merging layers within folders exceeding a defined nesting level into a single layer. Then, for each resulting layer, the method identifies whether the layer content is primarily text or image-based. If text, the actual text content is extracted. If image-based (or a mix of text and images), a screenshot of the smallest area containing all content within that layer is taken. Finally, it generates a webpage using the original design size, each layer's information (position, size) and either the extracted text or the generated screenshot for each layer.
2. The method according to claim 1 , wherein the layer information at least comprises a sequence number and a type of the layer and a position and a size of the material comprised in the layer; and the obtaining layer information of a layer comprised in the original design file comprises: obtaining a position and a size of a smallest area comprising all materials in the layer; determining that the position and the size of the smallest area are the position and the size of the material comprised in the layer; allocating the sequence number to the layer; and obtaining a type attribute of the layer, and obtaining the type of the layer according to the type attribute.
The method detailed in Claim 1 further specifies how layer information is obtained. This includes determining the position and size of the smallest rectangular area that encloses all the content of each layer. This position and size becomes the layer's position and size. The method also assigns a unique sequence number to each layer and determines the layer's type (e.g., text, image) based on its type attribute. The resulting layer information includes sequence number, type, position, and size. The webpage uses this for accurate element placement.
3. The method according to claim 2 , wherein in response to determining the type of the layer is text layer, the layer information of the layer further comprises pattern information of the layer; and the obtaining layer information of a layer comprised in the original design file further comprises: obtaining a pattern attribute of the layer, and obtaining the pattern information of the layer according to the pattern attribute.
The method, as described in Claim 2, includes additional handling for text layers. If a layer is identified as a text layer, the method extracts pattern information (e.g., font, color, style) from the layer's pattern attributes. This pattern information is included as part of the layer information. The webpage generation process uses this pattern information to accurately reproduce the text's appearance.
4. The method according to claim 1 , wherein the generating a webpage according to the size of the original design file, the layer information of the layer, and the material comprised in the layer comprises: creating a blank webpage according to the size of the original design file, wherein the blank webpage comprises a content area, and a size of the content area is equal to the size of the original design file; creating a display area corresponding to the layer in the content area according to a position and a size of the material that are comprised in the layer information of the layer; and loading the material comprised in the layer to the display area corresponding to the layer, to generate the webpage.
The method described in Claim 1 generates a webpage by first creating an empty webpage with a content area that matches the dimensions of the original design file. Next, for each layer in the design, it creates a corresponding display area within the content area. The position and size of this display area are determined by the position and size of the layer's material. Finally, the material (either the extracted text or the screenshot) associated with each layer is loaded into its corresponding display area, creating the final webpage.
5. The method according to claim 4 , wherein the loading the material comprised in the layer to the display area corresponding to the layer comprises: loading text content comprised in the layer to the display area corresponding to the layer in response to determining the type of the layer is text layer, and setting a pattern of the text content according to pattern information comprised in the layer information of the layer; and loading a screenshot corresponding to the layer to the display area corresponding to the layer in response to determining the type of the layer is image layer.
Building on Claim 4, the method specifies how the layer material is loaded into the display area. If the layer is a text layer, the extracted text content is loaded and its appearance is styled using the pattern information (font, color, etc.) associated with that layer. If the layer is an image layer, the previously captured screenshot of the layer is loaded into the display area. Thus the text will be displayed using font settings and images will be loaded in.
6. A webpage generating apparatus, the apparatus comprising: a processor; a memory which stores computer readable instructions that when executed by the processor cause the processor to: obtain a size of an original design file, wherein the size includes display dimensions of the original design file; obtain a level of each layer folder comprised in the original design file, and combine all layers comprised in layer folders levels of which are greater than a preset value into one layer; obtain layer information of a layer comprised in the original design file in which all the layers comprised in the layer folders, the levels of which are greater than the preset value, are combined into one layer; obtain a material comprised in the layer; and generate a webpage according to the size of the original design file, the layer information of the layer, and the material comprised in the layer; wherein obtaining the material comprised in the layer comprises: determining whether a type of the layer is text layer or image layer, wherein in response to determining that materials comprised in the layer is all text content, determining that the type of the layer is the text layer, and in response to determining that the materials comprised in the layer comprises both image materials and text content or comprises all image materials, determining that the type of the layer is image layer; obtaining text content comprised in the layer in response to determining the type of the layer is text layer, and determining that the obtained text content is the material comprised in the layer; and taking a screenshot of a smallest area comprising all materials comprised in the layer in response to determining the type of the layer is image layer, to obtain the screenshot corresponding to the layer, and determining that the screenshot is the material comprised in the layer.
An apparatus (e.g., a server or computer) that automatically converts a layered design file into a webpage. It obtains the size of the original design file. It simplifies the layer structure by merging layers within folders exceeding a defined nesting level into a single layer. Then, for each resulting layer, the apparatus identifies whether the layer content is primarily text or image-based. If text, the actual text content is extracted. If image-based (or a mix of text and images), a screenshot of the smallest area containing all content within that layer is taken. Finally, it generates a webpage using the original design size, each layer's information (position, size) and either the extracted text or the generated screenshot for each layer.
7. The apparatus according to claim 6 , wherein the layer information at least comprises a sequence number and a type of the layer and a position and a size of the material comprised in the layer; and the obtaining layer information of a layer comprised in the original design file comprises: obtaining a position and a size of a smallest area comprising all materials in the layer; determining that the position and the size of the smallest area are the position and the size of the material comprised in the layer; allocating the sequence number to the layer; and obtaining a type attribute of the layer, and obtaining the type of the layer according to the type attribute.
The apparatus detailed in Claim 6 further specifies how layer information is obtained. This includes determining the position and size of the smallest rectangular area that encloses all the content of each layer. This position and size becomes the layer's position and size. The apparatus also assigns a unique sequence number to each layer and determines the layer's type (e.g., text, image) based on its type attribute. The resulting layer information includes sequence number, type, position, and size. The webpage uses this for accurate element placement.
8. The apparatus according to claim 7 , wherein in response to determining the type of the layer is text layer, the layer information of the layer further comprises pattern information of the layer; and the obtaining layer information of a layer comprised in the original design file further comprises: obtaining a pattern attribute of the layer, and obtaining the pattern information of the layer according to the pattern attribute.
The apparatus, as described in Claim 7, includes additional handling for text layers. If a layer is identified as a text layer, the apparatus extracts pattern information (e.g., font, color, style) from the layer's pattern attributes. This pattern information is included as part of the layer information. The webpage generation process uses this pattern information to accurately reproduce the text's appearance.
9. The apparatus according to claim 6 , wherein the generating a webpage according to the size of the original design file, the layer information of the layer, and the material comprised in the layer comprises: creating a blank webpage according to the size of the original design file, wherein the blank webpage comprises a content area, and a size of the content area is equal to the size of the original design file; creating a display area corresponding to the layer in the content area according to a position and a size of the material that are comprised in the layer information of the layer; and loading the material comprised in the layer to the display area corresponding to the layer, to generate the webpage.
This invention relates to a system for generating webpages from design files, particularly for visualizing layered design content. The problem addressed is the need to accurately represent multi-layered design files in a webpage format while preserving the original dimensions and material placements of each layer. The apparatus generates a webpage by first creating a blank webpage with a content area sized to match the original design file. Within this content area, display areas are created for each layer based on the position and size of materials specified in the layer information. Each material from the design file is then loaded into its corresponding display area, ensuring the webpage accurately reflects the original design's structure and layout. The system ensures that the webpage maintains the exact dimensions of the original design file, with each layer's materials positioned precisely as defined in the design. This approach allows for dynamic and accurate visualization of complex layered designs in a web environment, preserving the integrity of the original design's spatial and material properties. The method is particularly useful for applications requiring precise digital representation of physical or digital design files, such as prototyping, visualization, or collaborative design workflows.
10. The apparatus according to claim 9 , wherein the loading the material comprised in the layer to the display area corresponding to the layer comprises: loading text content comprised in the layer to the display area corresponding to the layer in response to determining the type of the layer is text layer, and setting a pattern of the text content according to pattern information comprised in the layer information of the layer; and loading a screenshot corresponding to the layer to the display area corresponding to the layer in response to determining the type of the layer is image layer.
Building on Claim 9, the apparatus specifies how the layer material is loaded into the display area. If the layer is a text layer, the extracted text content is loaded and its appearance is styled using the pattern information (font, color, etc.) associated with that layer. If the layer is an image layer, the previously captured screenshot of the layer is loaded into the display area. Thus the text will be displayed using font settings and images will be loaded in.
Cooperative Patent Classification codes for this invention. Click any code to explore related patents in that topic.
April 21, 2015
August 22, 2017
Browse 5M+ US patents with plain-English claim translations and AI-generated analysis.