@jjlmoya/utils-games-development 1.46.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +67 -0
- package/scripts/postinstall.mjs +27 -0
- package/src/category/GamesCategorySEO.astro +19 -0
- package/src/category/i18n/de.ts +15 -0
- package/src/category/i18n/en.ts +15 -0
- package/src/category/i18n/es.ts +15 -0
- package/src/category/i18n/fr.ts +15 -0
- package/src/category/i18n/id.ts +10 -0
- package/src/category/i18n/it.ts +10 -0
- package/src/category/i18n/ja.ts +10 -0
- package/src/category/i18n/ko.ts +10 -0
- package/src/category/i18n/nl.ts +10 -0
- package/src/category/i18n/pl.ts +10 -0
- package/src/category/i18n/pt.ts +10 -0
- package/src/category/i18n/ru.ts +10 -0
- package/src/category/i18n/sv.ts +10 -0
- package/src/category/i18n/tr.ts +10 -0
- package/src/category/i18n/zh.ts +10 -0
- package/src/category/index.ts +24 -0
- package/src/category/seo.astro +15 -0
- package/src/components/PreviewNavSidebar.astro +116 -0
- package/src/components/PreviewToolbar.astro +143 -0
- package/src/data.ts +11 -0
- package/src/entries.ts +5 -0
- package/src/env.d.ts +5 -0
- package/src/index.ts +21 -0
- package/src/layouts/PreviewLayout.astro +122 -0
- package/src/pages/[locale]/[slug].astro +165 -0
- package/src/pages/[locale].astro +251 -0
- package/src/pages/index.astro +4 -0
- package/src/tests/diacritics_density.test.ts +118 -0
- package/src/tests/faq_count.test.ts +19 -0
- package/src/tests/i18n_coverage.test.ts +36 -0
- package/src/tests/inverted_punctuation.test.ts +84 -0
- package/src/tests/locale_completeness.test.ts +27 -0
- package/src/tests/mocks/astro_mock.js +2 -0
- package/src/tests/no_en_dash.test.ts +70 -0
- package/src/tests/no_h1_in_components.test.ts +48 -0
- package/src/tests/pagespeed_best_practices.test.ts +198 -0
- package/src/tests/qa-test-helpers.ts +32 -0
- package/src/tests/qa_bibliography_links.test.ts +41 -0
- package/src/tests/qa_claim_evidence.test.ts +69 -0
- package/src/tests/qa_logic_reference_coverage.test.ts +46 -0
- package/src/tests/qa_runtime_i18n.test.ts +100 -0
- package/src/tests/schemas_fulfillment.test.ts +23 -0
- package/src/tests/script_density.test.ts +94 -0
- package/src/tests/seo_length.test.ts +23 -0
- package/src/tests/slug_language_code_format.test.ts +23 -0
- package/src/tests/slug_uniqueness.test.ts +81 -0
- package/src/tests/title_quality.test.ts +56 -0
- package/src/tests/tool_validation.test.ts +17 -0
- package/src/tool/steamCapsuleGenerator/bibliography.astro +6 -0
- package/src/tool/steamCapsuleGenerator/bibliography.ts +6 -0
- package/src/tool/steamCapsuleGenerator/component.astro +289 -0
- package/src/tool/steamCapsuleGenerator/components/SteamLibraryGridMockup.astro +51 -0
- package/src/tool/steamCapsuleGenerator/components/SteamLibraryMockup.astro +64 -0
- package/src/tool/steamCapsuleGenerator/components/SteamMasterControls.astro +2 -0
- package/src/tool/steamCapsuleGenerator/components/SteamStoreMockup.astro +90 -0
- package/src/tool/steamCapsuleGenerator/entry.ts +28 -0
- package/src/tool/steamCapsuleGenerator/i18n/de.ts +144 -0
- package/src/tool/steamCapsuleGenerator/i18n/en.ts +243 -0
- package/src/tool/steamCapsuleGenerator/i18n/es.ts +243 -0
- package/src/tool/steamCapsuleGenerator/i18n/fr.ts +165 -0
- package/src/tool/steamCapsuleGenerator/i18n/id.ts +144 -0
- package/src/tool/steamCapsuleGenerator/i18n/it.ts +144 -0
- package/src/tool/steamCapsuleGenerator/i18n/ja.ts +144 -0
- package/src/tool/steamCapsuleGenerator/i18n/ko.ts +144 -0
- package/src/tool/steamCapsuleGenerator/i18n/nl.ts +144 -0
- package/src/tool/steamCapsuleGenerator/i18n/pl.ts +144 -0
- package/src/tool/steamCapsuleGenerator/i18n/pt.ts +144 -0
- package/src/tool/steamCapsuleGenerator/i18n/ru.ts +144 -0
- package/src/tool/steamCapsuleGenerator/i18n/shared.ts +46 -0
- package/src/tool/steamCapsuleGenerator/i18n/sv.ts +144 -0
- package/src/tool/steamCapsuleGenerator/i18n/tr.ts +144 -0
- package/src/tool/steamCapsuleGenerator/i18n/zh.ts +144 -0
- package/src/tool/steamCapsuleGenerator/index.ts +9 -0
- package/src/tool/steamCapsuleGenerator/logic.test.ts +72 -0
- package/src/tool/steamCapsuleGenerator/logic.ts +259 -0
- package/src/tool/steamCapsuleGenerator/seo.astro +15 -0
- package/src/tool/steamCapsuleGenerator/steam-capsule-generator.css +697 -0
- package/src/tool/steamCapsuleGenerator/ui.ts +23 -0
- package/src/tool/steamCapsuleGenerator/validation.ts +22 -0
- package/src/tools.ts +8 -0
- package/src/types.ts +72 -0
|
@@ -0,0 +1,243 @@
|
|
|
1
|
+
import type { ToolLocaleContent } from '../../../types';
|
|
2
|
+
import type { SteamCapsuleGeneratorUI } from '../ui';
|
|
3
|
+
import { bibliographyEntries } from '../bibliography';
|
|
4
|
+
|
|
5
|
+
export const content: ToolLocaleContent<SteamCapsuleGeneratorUI> = {
|
|
6
|
+
slug: 'steam-capsule-generator',
|
|
7
|
+
title: 'Steam Capsule & Art Preview Generator',
|
|
8
|
+
description: 'Crop, preview, and format official Steam store capsules and library assets with live mockup inspection and safe zone verification.',
|
|
9
|
+
ui: {
|
|
10
|
+
uploadTitle: 'Upload Game Artwork',
|
|
11
|
+
uploadHint: 'Upload high-resolution source banner or key visual (recommended 3840x1240 or larger).',
|
|
12
|
+
chooseFile: 'Select File',
|
|
13
|
+
minimumSize: 'Recommended minimum size: 1920x1080 px',
|
|
14
|
+
horizontalFocus: 'Horizontal Focus (X)',
|
|
15
|
+
verticalFocus: 'Vertical Focus (Y)',
|
|
16
|
+
zoomLevel: 'Zoom Magnification',
|
|
17
|
+
resetFocus: 'Center Focal Point',
|
|
18
|
+
safeZone: 'Safe Zone Overlay',
|
|
19
|
+
downloadZip: 'Download All Steam Assets (ZIP)',
|
|
20
|
+
headerCapsule: 'Header Capsule (460x215 / HD 920x430)',
|
|
21
|
+
smallCapsule: 'Small Capsule (231x87 / HD 462x174)',
|
|
22
|
+
mainCapsule: 'Main Capsule (616x353 / HD 1232x706)',
|
|
23
|
+
verticalCapsule: 'Vertical Library Capsule (300x450 / HD 600x900)',
|
|
24
|
+
libraryHero: 'Library Hero Banner (1920x620 / HD 3840x1240)',
|
|
25
|
+
communityIcon: 'Community App Icon (32x32 / HD 184x184)',
|
|
26
|
+
storePreviewTab: 'Steam Store Mockup',
|
|
27
|
+
libraryPreviewTab: 'Steam Library Mockup',
|
|
28
|
+
allAssetsTab: 'All Asset Sizes',
|
|
29
|
+
toggleSafeZones: 'Safe Zone Guides',
|
|
30
|
+
toggleSteamOverlay: 'Steam Interface Overlay'
|
|
31
|
+
},
|
|
32
|
+
seo: [
|
|
33
|
+
{
|
|
34
|
+
type: 'title',
|
|
35
|
+
level: 2,
|
|
36
|
+
text: 'Steam Graphical Asset Specifications and Presentation Rules'
|
|
37
|
+
},
|
|
38
|
+
{
|
|
39
|
+
type: 'paragraph',
|
|
40
|
+
html: 'Steam store pages and player library views rely on standardized graphical capsule images to display your title across various device displays and storefront widgets. Key visuals must maintain visual clarity, readability, and brand coherence across vastly different aspect ratios ranging from wide horizontal store banners to tall vertical library grid tiles. When preparing assets for submission to Steamworks, developers must adhere to strict pixel dimensions, file format guidelines, and UI overlay safe zones to avoid text obstruction from system elements like price tags, wishlist buttons, and status labels.'
|
|
41
|
+
},
|
|
42
|
+
{
|
|
43
|
+
type: 'stats',
|
|
44
|
+
columns: 4,
|
|
45
|
+
items: [
|
|
46
|
+
{ label: 'Store Header HD Resolution', value: '920 x 430 px' },
|
|
47
|
+
{ label: 'Library Capsule Aspect Ratio', value: '2:3 Vertical' },
|
|
48
|
+
{ label: 'Library Hero Maximum Res', value: '3840 x 1240 px' },
|
|
49
|
+
{ label: 'Community Icon Size', value: '184 x 184 px' }
|
|
50
|
+
]
|
|
51
|
+
},
|
|
52
|
+
{
|
|
53
|
+
type: 'title',
|
|
54
|
+
level: 2,
|
|
55
|
+
text: 'Comparing Steam Capsule Formats Across Storefront Placement'
|
|
56
|
+
},
|
|
57
|
+
{
|
|
58
|
+
type: 'paragraph',
|
|
59
|
+
html: 'Different sections of the Steam client highlight distinct asset dimensions. The Main Capsule serves as the primary visual anchor in featured recommendation carousels, whereas Small Capsules appear in fast-scrolling search result listings and promotional category feeds. Understanding how each asset functions ensures optimal conversion rates and player engagement.'
|
|
60
|
+
},
|
|
61
|
+
{
|
|
62
|
+
type: 'comparative',
|
|
63
|
+
columns: 2,
|
|
64
|
+
items: [
|
|
65
|
+
{
|
|
66
|
+
title: 'Store Capsules (Header & Main)',
|
|
67
|
+
description: 'Landscape aspect ratio focused on game title and main key visual.',
|
|
68
|
+
points: [
|
|
69
|
+
'Landscape aspect ratio focused on game title and main key visual',
|
|
70
|
+
'Bottom-right area reserved for discount badge overlays and price tags',
|
|
71
|
+
'High horizontal span suited for widescreen store carousel displays',
|
|
72
|
+
'Requires immediate logo legibility at scaled desktop resolutions'
|
|
73
|
+
]
|
|
74
|
+
},
|
|
75
|
+
{
|
|
76
|
+
title: 'Library Assets (Hero & Vertical Capsule)',
|
|
77
|
+
description: 'Vertical capsule acts as game box art on player desktop grid.',
|
|
78
|
+
points: [
|
|
79
|
+
'Vertical capsule acts as game box art on player desktop grid',
|
|
80
|
+
'Library Hero features wide panoramic background visual without embedded text',
|
|
81
|
+
'Library Logo overlay floats independently with transparent PNG background',
|
|
82
|
+
'Top and bottom margins host achievement progress and play buttons'
|
|
83
|
+
]
|
|
84
|
+
}
|
|
85
|
+
]
|
|
86
|
+
},
|
|
87
|
+
{
|
|
88
|
+
type: 'title',
|
|
89
|
+
level: 2,
|
|
90
|
+
text: 'Steam Asset Dimensional Matrix Reference'
|
|
91
|
+
},
|
|
92
|
+
{
|
|
93
|
+
type: 'paragraph',
|
|
94
|
+
html: 'Below is the full technical matrix outlining standard and high-density resolution parameters required for a complete Steamworks storefront and library publication.'
|
|
95
|
+
},
|
|
96
|
+
{
|
|
97
|
+
type: 'table',
|
|
98
|
+
headers: ['Asset Type', 'Standard Size (px)', 'HD Target Size (px)', 'Aspect Ratio', 'Format'],
|
|
99
|
+
rows: [
|
|
100
|
+
['Header Capsule', '460 x 215', '920 x 430', '2.14:1', 'JPG / PNG'],
|
|
101
|
+
['Small Capsule', '231 x 87', '462 x 174', '2.65:1', 'JPG / PNG'],
|
|
102
|
+
['Main Capsule', '616 x 353', '1232 x 706', '1.74:1', 'JPG / PNG'],
|
|
103
|
+
['Vertical Library Capsule', '300 x 450', '600 x 900', '2:3', 'JPG / PNG'],
|
|
104
|
+
['Library Hero', '1920 x 620', '3840 x 1240', '3.1:1', 'JPG / PNG'],
|
|
105
|
+
['Library Logo', '1280 x 720', '1280 x 720', '16:9', 'Transparent PNG'],
|
|
106
|
+
['Community Icon', '32 x 32', '184 x 184', '1:1', 'PNG']
|
|
107
|
+
]
|
|
108
|
+
},
|
|
109
|
+
{
|
|
110
|
+
type: 'title',
|
|
111
|
+
level: 2,
|
|
112
|
+
text: 'Best Practices for Safe Area Management and Visual Formatting'
|
|
113
|
+
},
|
|
114
|
+
{
|
|
115
|
+
type: 'tip',
|
|
116
|
+
title: 'Safe Zone Optimization Strategy',
|
|
117
|
+
html: 'Keep all critical logotypes and character eyes within the upper-left two-thirds of the image canvas. Avoid placing fine print or secondary title text near the bottom right edge where discount badges display.'
|
|
118
|
+
},
|
|
119
|
+
{
|
|
120
|
+
type: 'title',
|
|
121
|
+
level: 2,
|
|
122
|
+
text: 'Pros and Cons of Automated Smart Focal Cropping'
|
|
123
|
+
},
|
|
124
|
+
{
|
|
125
|
+
type: 'proscons',
|
|
126
|
+
title: 'Workflow Evaluation',
|
|
127
|
+
items: [
|
|
128
|
+
{
|
|
129
|
+
pro: 'Instant generation of all seven required Steam asset dimensions',
|
|
130
|
+
con: 'Complex key visual compositions may require separate dedicated background layers'
|
|
131
|
+
},
|
|
132
|
+
{
|
|
133
|
+
pro: 'Live interactive preview of Steam store and library user interfaces',
|
|
134
|
+
con: 'Ultra-wide Library Hero banners may benefit from custom horizontal extension artwork'
|
|
135
|
+
},
|
|
136
|
+
{
|
|
137
|
+
pro: 'Eliminates scale distortion by maintaining exact aspect ratios',
|
|
138
|
+
con: 'Manual review recommended before official Steamworks upload'
|
|
139
|
+
}
|
|
140
|
+
]
|
|
141
|
+
},
|
|
142
|
+
{
|
|
143
|
+
type: 'title',
|
|
144
|
+
level: 2,
|
|
145
|
+
text: 'Steam Graphics Glossary and Terminologies'
|
|
146
|
+
},
|
|
147
|
+
{
|
|
148
|
+
type: 'glossary',
|
|
149
|
+
items: [
|
|
150
|
+
{
|
|
151
|
+
term: 'Capsule',
|
|
152
|
+
definition: 'Standard term used by Valve to describe promotional box art graphic containers across the Steam storefront and client library.'
|
|
153
|
+
},
|
|
154
|
+
{
|
|
155
|
+
term: 'Library Hero',
|
|
156
|
+
definition: 'The expansive header banner image displayed at the top of a game detail page inside the player library view.'
|
|
157
|
+
},
|
|
158
|
+
{
|
|
159
|
+
term: 'Safe Zone',
|
|
160
|
+
definition: 'Designated bounds within a capsule layout that remain free from native Steam client UI overlays such as price tags, play buttons, and wishlist flags.'
|
|
161
|
+
},
|
|
162
|
+
{
|
|
163
|
+
term: 'High-Density (HD) Spec',
|
|
164
|
+
definition: 'Double-resolution asset target required by Steamworks to ensure crisp display on Retina and 4K displays.'
|
|
165
|
+
}
|
|
166
|
+
]
|
|
167
|
+
}
|
|
168
|
+
],
|
|
169
|
+
faqTitle: 'Frequently Asked Questions About Steam Assets',
|
|
170
|
+
faq: [
|
|
171
|
+
{
|
|
172
|
+
question: 'What file format should I use for Steam capsules?',
|
|
173
|
+
answer: 'Steam accepts JPG or PNG files for main capsules. High-quality JPG is recommended for complex artwork.'
|
|
174
|
+
},
|
|
175
|
+
{
|
|
176
|
+
question: 'Why are HD target sizes larger than display dimensions?',
|
|
177
|
+
answer: 'Steam automatically downscales high-density images (such as 920x430 for Header Capsule) to match modern high-DPI and 4K desktop screens without losing sharpness.'
|
|
178
|
+
},
|
|
179
|
+
{
|
|
180
|
+
question: 'Where is the price tag located on Steam store capsules?',
|
|
181
|
+
answer: 'Price tags and discount badges are positioned in the bottom-right corner of store capsules. Keep title text and important logos away from this region.'
|
|
182
|
+
}
|
|
183
|
+
],
|
|
184
|
+
howTo: [
|
|
185
|
+
{
|
|
186
|
+
name: 'Upload High-Resolution Artwork',
|
|
187
|
+
text: 'Select a high-density promotional visual using the uploader.'
|
|
188
|
+
},
|
|
189
|
+
{
|
|
190
|
+
name: 'Adjust Focal Point and Zoom',
|
|
191
|
+
text: 'Use the horizontal and vertical focal point sliders to align character faces or logo focal points inside the composition box.'
|
|
192
|
+
},
|
|
193
|
+
{
|
|
194
|
+
name: 'Verify Safe Zone Overlays',
|
|
195
|
+
text: 'Toggle Safe Zone Guides to verify that no title text or focal elements are covered by Steam price badges or UI buttons.'
|
|
196
|
+
},
|
|
197
|
+
{
|
|
198
|
+
name: 'Export Complete Steam Asset Package',
|
|
199
|
+
text: 'Click Download All Steam Assets to download a ZIP archive containing all formatted capsule images ready for Steamworks.'
|
|
200
|
+
}
|
|
201
|
+
],
|
|
202
|
+
schemas: [
|
|
203
|
+
{
|
|
204
|
+
'@context': 'https://schema.org',
|
|
205
|
+
'@type': 'SoftwareApplication',
|
|
206
|
+
name: 'Steam Capsule & Art Preview Generator',
|
|
207
|
+
applicationCategory: 'DeveloperApplication',
|
|
208
|
+
operatingSystem: 'Any',
|
|
209
|
+
offers: {
|
|
210
|
+
'@type': 'Offer',
|
|
211
|
+
price: '0',
|
|
212
|
+
priceCurrency: 'USD'
|
|
213
|
+
}
|
|
214
|
+
},
|
|
215
|
+
{
|
|
216
|
+
'@context': 'https://schema.org',
|
|
217
|
+
'@type': 'FAQPage',
|
|
218
|
+
mainEntity: [
|
|
219
|
+
{
|
|
220
|
+
'@type': 'Question',
|
|
221
|
+
name: 'What file format should I use for Steam capsules?',
|
|
222
|
+
acceptedAnswer: {
|
|
223
|
+
'@type': 'Answer',
|
|
224
|
+
text: 'Steam accepts JPG or PNG files for main capsules. High-quality JPG is recommended for complex artwork.'
|
|
225
|
+
}
|
|
226
|
+
}
|
|
227
|
+
]
|
|
228
|
+
},
|
|
229
|
+
{
|
|
230
|
+
'@context': 'https://schema.org',
|
|
231
|
+
'@type': 'HowTo',
|
|
232
|
+
name: 'How to generate Steam Capsules and Artwork',
|
|
233
|
+
step: [
|
|
234
|
+
{
|
|
235
|
+
'@type': 'HowToStep',
|
|
236
|
+
name: 'Upload High-Resolution Artwork',
|
|
237
|
+
text: 'Select a high-density promotional visual using the uploader.'
|
|
238
|
+
}
|
|
239
|
+
]
|
|
240
|
+
}
|
|
241
|
+
],
|
|
242
|
+
bibliography: bibliographyEntries
|
|
243
|
+
};
|
|
@@ -0,0 +1,243 @@
|
|
|
1
|
+
import type { ToolLocaleContent } from '../../../types';
|
|
2
|
+
import type { SteamCapsuleGeneratorUI } from '../ui';
|
|
3
|
+
import { bibliographyEntries } from '../bibliography';
|
|
4
|
+
|
|
5
|
+
export const content: ToolLocaleContent<SteamCapsuleGeneratorUI> = {
|
|
6
|
+
slug: 'generador-de-capsulas-de-steam',
|
|
7
|
+
title: 'Generador de Cápsulas y Vista Previa para Steam',
|
|
8
|
+
description: 'Recorta, previsualiza y da formato a las cápsulas oficiales de la tienda y biblioteca de Steam con inspección en vivo de maquetas y zonas seguras.',
|
|
9
|
+
ui: {
|
|
10
|
+
uploadTitle: 'Subir Ilustración Principal',
|
|
11
|
+
uploadHint: 'Sube una imagen o arte principal en alta resolución (recomendado 3840x1240 o mayor).',
|
|
12
|
+
chooseFile: 'Seleccionar Archivo',
|
|
13
|
+
minimumSize: 'Tamaño mínimo recomendado: 1920x1080 px',
|
|
14
|
+
horizontalFocus: 'Enfoque Horizontal (X)',
|
|
15
|
+
verticalFocus: 'Enfoque Vertical (Y)',
|
|
16
|
+
zoomLevel: 'Nivel de Zoom',
|
|
17
|
+
resetFocus: 'Centrar Enfoque',
|
|
18
|
+
safeZone: 'Superposición de Zona Segura',
|
|
19
|
+
downloadZip: 'Descargar Todos los Assets (ZIP)',
|
|
20
|
+
headerCapsule: 'Header Capsule (460x215 / HD 920x430)',
|
|
21
|
+
smallCapsule: 'Small Capsule (231x87 / HD 462x174)',
|
|
22
|
+
mainCapsule: 'Main Capsule (616x353 / HD 1232x706)',
|
|
23
|
+
verticalCapsule: 'Cápsula Vertical de Biblioteca (300x450 / HD 600x900)',
|
|
24
|
+
libraryHero: 'Banner Superior de Biblioteca (1920x620 / HD 3840x1240)',
|
|
25
|
+
communityIcon: 'Icono de Aplicación (32x32 / HD 184x184)',
|
|
26
|
+
storePreviewTab: 'Maqueta Tienda Steam',
|
|
27
|
+
libraryPreviewTab: 'Maqueta Biblioteca Steam',
|
|
28
|
+
allAssetsTab: 'Todos los Tamaños',
|
|
29
|
+
toggleSafeZones: 'Guías de Zonas Seguras',
|
|
30
|
+
toggleSteamOverlay: 'Interfaz de Steam'
|
|
31
|
+
},
|
|
32
|
+
seo: [
|
|
33
|
+
{
|
|
34
|
+
type: 'title',
|
|
35
|
+
level: 2,
|
|
36
|
+
text: 'Especificaciones de Assets Gráficos y Reglas de Steam'
|
|
37
|
+
},
|
|
38
|
+
{
|
|
39
|
+
type: 'paragraph',
|
|
40
|
+
html: 'Las páginas de la tienda de Steam y las vistas de biblioteca del jugador dependen de cápsulas gráficas estandarizadas para mostrar tu videojuego en una amplia variedad de pantallas. Los elementos visuales deben mantener claridad, legibilidad y coherencia de marca a través de proporciones que van desde banners horizontales panorámicos hasta tarjetas verticales de cuadrícula. Al preparar assets para Steamworks, los desarrolladores deben cumplir estrictas dimensiones en píxeles y márgenes de seguridad para evitar que elementos como insignias de descuento o precios tapen el título.'
|
|
41
|
+
},
|
|
42
|
+
{
|
|
43
|
+
type: 'stats',
|
|
44
|
+
columns: 4,
|
|
45
|
+
items: [
|
|
46
|
+
{ label: 'Resolución Header HD', value: '920 x 430 px' },
|
|
47
|
+
{ label: 'Proporción Cápsula Vertical', value: '2:3 Vertical' },
|
|
48
|
+
{ label: 'Resolución Máxima Hero', value: '3840 x 1240 px' },
|
|
49
|
+
{ label: 'Icono de Comunidad', value: '184 x 184 px' }
|
|
50
|
+
]
|
|
51
|
+
},
|
|
52
|
+
{
|
|
53
|
+
type: 'title',
|
|
54
|
+
level: 2,
|
|
55
|
+
text: 'Comparativa de Formatos de Cápsula en la Tienda'
|
|
56
|
+
},
|
|
57
|
+
{
|
|
58
|
+
type: 'paragraph',
|
|
59
|
+
html: 'Diferentes secciones del cliente de Steam destacan dimensiones gráficas distintas. La Cápsula Principal sirve como ancla visual en los carruseles destacados, mientras que las Cápsulas Pequeñas aparecen en las listas de búsqueda rápida. Comprender el funcionamiento de cada asset asegura mejores tasas de conversión y tracción de jugadores.'
|
|
60
|
+
},
|
|
61
|
+
{
|
|
62
|
+
type: 'comparative',
|
|
63
|
+
columns: 2,
|
|
64
|
+
items: [
|
|
65
|
+
{
|
|
66
|
+
title: 'Cápsulas de Tienda (Header y Main)',
|
|
67
|
+
description: 'Proporción apaisada centrada en el título del juego y el arte clave principal.',
|
|
68
|
+
points: [
|
|
69
|
+
'Proporción apaisada centrada en el título del juego y el arte clave principal',
|
|
70
|
+
'Esquina inferior derecha reservada para etiquetas de precio e insignias de descuento',
|
|
71
|
+
'Amplia cobertura horizontal ideal para pantallas de carrusel panorámicas',
|
|
72
|
+
'Requiere legibilidad inmediata del logotipo en resoluciones escaladas de escritorio'
|
|
73
|
+
]
|
|
74
|
+
},
|
|
75
|
+
{
|
|
76
|
+
title: 'Assets de Biblioteca (Hero y Cápsula Vertical)',
|
|
77
|
+
description: 'La cápsula vertical actúa como la portada física en la cuadrícula del usuario.',
|
|
78
|
+
points: [
|
|
79
|
+
'La cápsula vertical actúa como la portada física en la cuadrícula del usuario',
|
|
80
|
+
'El Library Hero muestra un fondo panorámico ancho sin texto integrado',
|
|
81
|
+
'El logo de biblioteca flota de forma independiente como PNG transparente',
|
|
82
|
+
'Márgenes superior e inferior albergan botones de reproducción y logros'
|
|
83
|
+
]
|
|
84
|
+
}
|
|
85
|
+
]
|
|
86
|
+
},
|
|
87
|
+
{
|
|
88
|
+
type: 'title',
|
|
89
|
+
level: 2,
|
|
90
|
+
text: 'Matriz Técnica de Dimensiones para Steamworks'
|
|
91
|
+
},
|
|
92
|
+
{
|
|
93
|
+
type: 'paragraph',
|
|
94
|
+
html: 'A continuación se presenta la matriz técnica completa con los parámetros de resolución estándar y de alta densidad (HD) requeridos para publicar un título en Steam.'
|
|
95
|
+
},
|
|
96
|
+
{
|
|
97
|
+
type: 'table',
|
|
98
|
+
headers: ['Tipo de Asset', 'Tamaño Estándar (px)', 'Tamaño HD Objetivo (px)', 'Proporción', 'Formato'],
|
|
99
|
+
rows: [
|
|
100
|
+
['Header Capsule', '460 x 215', '920 x 430', '2.14:1', 'JPG / PNG'],
|
|
101
|
+
['Small Capsule', '231 x 87', '462 x 174', '2.65:1', 'JPG / PNG'],
|
|
102
|
+
['Main Capsule', '616 x 353', '1232 x 706', '1.74:1', 'JPG / PNG'],
|
|
103
|
+
['Vertical Library Capsule', '300 x 450', '600 x 900', '2:3', 'JPG / PNG'],
|
|
104
|
+
['Library Hero', '1920 x 620', '3840 x 1240', '3.1:1', 'JPG / PNG'],
|
|
105
|
+
['Library Logo', '1280 x 720', '1280 x 720', '16:9', 'PNG Transparente'],
|
|
106
|
+
['Community Icon', '32 x 32', '184 x 184', '1:1', 'PNG']
|
|
107
|
+
]
|
|
108
|
+
},
|
|
109
|
+
{
|
|
110
|
+
type: 'title',
|
|
111
|
+
level: 2,
|
|
112
|
+
text: 'Mejores Prácticas para el Manejo de Áreas Seguras'
|
|
113
|
+
},
|
|
114
|
+
{
|
|
115
|
+
type: 'tip',
|
|
116
|
+
title: 'Estrategia de Optimización de Zonas Seguras',
|
|
117
|
+
html: 'Mantén todos los logotipos críticos y elementos principales dentro de los dos tercios superiores izquierdos del lienzo. Evita colocar texto secundario cerca de la esquina inferior derecha.'
|
|
118
|
+
},
|
|
119
|
+
{
|
|
120
|
+
type: 'title',
|
|
121
|
+
level: 2,
|
|
122
|
+
text: 'Ventajas del Recorte Inteligente Basado en Punto Focal'
|
|
123
|
+
},
|
|
124
|
+
{
|
|
125
|
+
type: 'proscons',
|
|
126
|
+
title: 'Evaluación del Flujo de Trabajo',
|
|
127
|
+
items: [
|
|
128
|
+
{
|
|
129
|
+
pro: 'Generación instantánea de los 6 tamaños clave para Steamworks',
|
|
130
|
+
con: 'Composiciones complejas pueden beneficiarse de capas separadas para el fondo y el logo'
|
|
131
|
+
},
|
|
132
|
+
{
|
|
133
|
+
pro: 'Vista previa interactiva en vivo de la tienda y la biblioteca de Steam',
|
|
134
|
+
con: 'Banners muy anchos como Library Hero pueden requerir extensión horizontal del arte'
|
|
135
|
+
},
|
|
136
|
+
{
|
|
137
|
+
pro: 'Elimina la distorsión manteniendo las proporciones exactas',
|
|
138
|
+
con: 'Revisión manual recomendada antes de la subida oficial a Steamworks'
|
|
139
|
+
}
|
|
140
|
+
]
|
|
141
|
+
},
|
|
142
|
+
{
|
|
143
|
+
type: 'title',
|
|
144
|
+
level: 2,
|
|
145
|
+
text: 'Glosario de Términos Gráficos de Steam'
|
|
146
|
+
},
|
|
147
|
+
{
|
|
148
|
+
type: 'glossary',
|
|
149
|
+
items: [
|
|
150
|
+
{
|
|
151
|
+
term: 'Capsule',
|
|
152
|
+
definition: 'Término estándar utilizado por Valve para describir los contenedores de portadas promocionales en la tienda y biblioteca de Steam.'
|
|
153
|
+
},
|
|
154
|
+
{
|
|
155
|
+
term: 'Library Hero',
|
|
156
|
+
definition: 'Imagen de cabecera panorámica que se muestra en la parte superior de la página de detalles del juego dentro de la biblioteca.'
|
|
157
|
+
},
|
|
158
|
+
{
|
|
159
|
+
term: 'Safe Zone',
|
|
160
|
+
definition: 'Límites designados dentro del diseño que permanecen libres de superposiciones de la interfaz nativa del cliente de Steam.'
|
|
161
|
+
},
|
|
162
|
+
{
|
|
163
|
+
term: 'Especificación HD',
|
|
164
|
+
definition: 'Objetivo de resolución al doble exigido por Steamworks para garantizar una visualización nítida en pantallas 4K y Retina.'
|
|
165
|
+
}
|
|
166
|
+
]
|
|
167
|
+
}
|
|
168
|
+
],
|
|
169
|
+
faqTitle: 'Preguntas Frecuentes Sobre Assets de Steam',
|
|
170
|
+
faq: [
|
|
171
|
+
{
|
|
172
|
+
question: '¿Qué formato de archivo debo utilizar para las cápsulas de Steam?',
|
|
173
|
+
answer: 'Steam acepta JPG o PNG para las cápsulas principales. Se recomienda JPG de alta calidad para ilustraciones complejas.'
|
|
174
|
+
},
|
|
175
|
+
{
|
|
176
|
+
question: '¿Por qué los tamaños HD son mayores que la resolución de pantalla?',
|
|
177
|
+
answer: 'Steam escala automáticamente las imágenes de alta densidad (como 920x430 para la Header Capsule) para pantallas modernas 4K sin perder nitidez.'
|
|
178
|
+
},
|
|
179
|
+
{
|
|
180
|
+
question: '¿Dónde se ubica la insignia de precio en las cápsulas de la tienda?',
|
|
181
|
+
answer: 'Las etiquetas de precio y los banners de descuento se posicionan en la esquina inferior derecha. Mantén el título y los logos lejos de esta región.'
|
|
182
|
+
}
|
|
183
|
+
],
|
|
184
|
+
howTo: [
|
|
185
|
+
{
|
|
186
|
+
name: 'Subir Ilustración de Alta Resolución',
|
|
187
|
+
text: 'Selecciona una imagen de alta densidad utilizando el cargador o haciendo clic en la maqueta.'
|
|
188
|
+
},
|
|
189
|
+
{
|
|
190
|
+
name: 'Ajustar Punto Focal y Zoom',
|
|
191
|
+
text: 'Utiliza los deslizadores para alinear el rostro o el logotipo dentro de la casilla de composición.'
|
|
192
|
+
},
|
|
193
|
+
{
|
|
194
|
+
name: 'Verificar Zonas Seguras',
|
|
195
|
+
text: 'Activa las guías de zona segura para comprobar que ningún texto quede tapado por las insignias de precio.'
|
|
196
|
+
},
|
|
197
|
+
{
|
|
198
|
+
name: 'Exportar Paquete Completo de Steam',
|
|
199
|
+
text: 'Haz clic en Descargar ZIP para obtener un archivo comprimido con todas las cápsulas formateadas.'
|
|
200
|
+
}
|
|
201
|
+
],
|
|
202
|
+
schemas: [
|
|
203
|
+
{
|
|
204
|
+
'@context': 'https://schema.org',
|
|
205
|
+
'@type': 'SoftwareApplication',
|
|
206
|
+
name: 'Generador de Cápsulas y Vista Previa para Steam',
|
|
207
|
+
applicationCategory: 'DeveloperApplication',
|
|
208
|
+
operatingSystem: 'Any',
|
|
209
|
+
offers: {
|
|
210
|
+
'@type': 'Offer',
|
|
211
|
+
price: '0',
|
|
212
|
+
priceCurrency: 'USD'
|
|
213
|
+
}
|
|
214
|
+
},
|
|
215
|
+
{
|
|
216
|
+
'@context': 'https://schema.org',
|
|
217
|
+
'@type': 'FAQPage',
|
|
218
|
+
mainEntity: [
|
|
219
|
+
{
|
|
220
|
+
'@type': 'Question',
|
|
221
|
+
name: '¿Qué formato de archivo debo utilizar para las cápsulas de Steam?',
|
|
222
|
+
acceptedAnswer: {
|
|
223
|
+
'@type': 'Answer',
|
|
224
|
+
text: 'Steam acepta JPG o PNG para las cápsulas principales.'
|
|
225
|
+
}
|
|
226
|
+
}
|
|
227
|
+
]
|
|
228
|
+
},
|
|
229
|
+
{
|
|
230
|
+
'@context': 'https://schema.org',
|
|
231
|
+
'@type': 'HowTo',
|
|
232
|
+
name: 'Cómo generar cápsulas y assets para Steam',
|
|
233
|
+
step: [
|
|
234
|
+
{
|
|
235
|
+
'@type': 'HowToStep',
|
|
236
|
+
name: 'Subir Ilustración de Alta Resolución',
|
|
237
|
+
text: 'Selecciona una imagen de alta densidad utilizando el cargador.'
|
|
238
|
+
}
|
|
239
|
+
]
|
|
240
|
+
}
|
|
241
|
+
],
|
|
242
|
+
bibliography: bibliographyEntries
|
|
243
|
+
};
|
|
@@ -0,0 +1,165 @@
|
|
|
1
|
+
import type { ToolLocaleContent } from '../../../types';
|
|
2
|
+
import type { SteamCapsuleGeneratorUI } from '../ui';
|
|
3
|
+
import { bibliographyEntries } from '../bibliography';
|
|
4
|
+
|
|
5
|
+
export const content: ToolLocaleContent<SteamCapsuleGeneratorUI> = {
|
|
6
|
+
slug: 'generateur-de-capsules-steam',
|
|
7
|
+
title: 'Générateur et Prévisualisation de Capsules Steam',
|
|
8
|
+
description: 'Radrer, prévisualiser et traiter les capsules officielles du magasin et de la bibliothèque Steam avec vérification des zones de sécurité.',
|
|
9
|
+
ui: {
|
|
10
|
+
uploadTitle: 'Téléverser une Illustration',
|
|
11
|
+
uploadHint: 'Téléversez une illustration haute résolution (recommandé 3840x1240 px ou plus).',
|
|
12
|
+
chooseFile: 'Choisir un Fichier',
|
|
13
|
+
minimumSize: 'Taille minimale recommandée: 1920x1080 px',
|
|
14
|
+
horizontalFocus: 'Ajustement Horizontal (X)',
|
|
15
|
+
verticalFocus: 'Ajustement Vertical (Y)',
|
|
16
|
+
zoomLevel: 'Niveau de Zoom',
|
|
17
|
+
resetFocus: 'Réinitialiser le Point Focal',
|
|
18
|
+
safeZone: 'Zone de Sécurité',
|
|
19
|
+
downloadZip: 'Télécharger Tous les Fichiers (ZIP)',
|
|
20
|
+
headerCapsule: 'Capsule En Tete (460x215 / HD 920x430)',
|
|
21
|
+
smallCapsule: 'Petite Capsule (231x87 / HD 462x174)',
|
|
22
|
+
mainCapsule: 'Capsule Principale (616x353 / HD 1232x706)',
|
|
23
|
+
verticalCapsule: 'Capsule Verticale de Bibliothèque (300x450 / HD 600x900)',
|
|
24
|
+
libraryHero: 'Bannière de Bibliothèque (1920x620 / HD 3840x1240)',
|
|
25
|
+
communityIcon: 'Icône Application (32x32 / HD 184x184)',
|
|
26
|
+
storePreviewTab: 'Magasin Steam',
|
|
27
|
+
libraryPreviewTab: 'Bibliothèque Steam',
|
|
28
|
+
allAssetsTab: 'Toutes les Tailles',
|
|
29
|
+
toggleSafeZones: 'Guides de Sécurité',
|
|
30
|
+
toggleSteamOverlay: 'Interface Steam'
|
|
31
|
+
},
|
|
32
|
+
seo: [
|
|
33
|
+
{
|
|
34
|
+
type: 'title',
|
|
35
|
+
level: 2,
|
|
36
|
+
text: 'Spécifications des Capsules Graphiques Steam'
|
|
37
|
+
},
|
|
38
|
+
{
|
|
39
|
+
type: 'paragraph',
|
|
40
|
+
html: 'Les pages du magasin Steam et la bibliothèque nécessitent des images capsules standardisées pour afficher votre jeu sur divers écrans.'
|
|
41
|
+
},
|
|
42
|
+
{
|
|
43
|
+
type: 'stats',
|
|
44
|
+
columns: 4,
|
|
45
|
+
items: [
|
|
46
|
+
{ label: 'Résolution HD En Tete', value: '920 x 430 px' },
|
|
47
|
+
{ label: 'Ratio Capsule Verticale', value: '2:3 Vertical' },
|
|
48
|
+
{ label: 'Résolution Max Bannière', value: '3840 x 1240 px' },
|
|
49
|
+
{ label: 'Taille Icône Communauté', value: '184 x 184 px' }
|
|
50
|
+
]
|
|
51
|
+
},
|
|
52
|
+
{
|
|
53
|
+
type: 'comparative',
|
|
54
|
+
columns: 2,
|
|
55
|
+
items: [
|
|
56
|
+
{
|
|
57
|
+
title: 'Capsules Magasin En Tete et Principale',
|
|
58
|
+
description: 'Format paysage centré sur le titre et le visuel principal.',
|
|
59
|
+
points: [
|
|
60
|
+
'Format paysage centré sur le titre et le visuel principal',
|
|
61
|
+
'Coin inférieur droit réservé aux badges de réduction et prix'
|
|
62
|
+
]
|
|
63
|
+
},
|
|
64
|
+
{
|
|
65
|
+
title: 'Éléments de Bibliothèque Bannière et Verticale',
|
|
66
|
+
description: 'La capsule verticale agit comme une pochette de jeu.',
|
|
67
|
+
points: [
|
|
68
|
+
'La capsule verticale agit comme une pochette de jeu'
|
|
69
|
+
]
|
|
70
|
+
}
|
|
71
|
+
]
|
|
72
|
+
},
|
|
73
|
+
{
|
|
74
|
+
type: 'table',
|
|
75
|
+
headers: ['Type Element', 'Taille Standard (px)', 'Taille HD Cible (px)', 'Ratio d Aspect', 'Format'],
|
|
76
|
+
rows: [
|
|
77
|
+
['Capsule En Tete', '460 x 215', '920 x 430', '2.14:1', 'JPG / PNG'],
|
|
78
|
+
['Petite Capsule', '231 x 87', '462 x 174', '2.65:1', 'JPG / PNG'],
|
|
79
|
+
['Capsule Principale', '616 x 353', '1232 x 706', '1.74:1', 'JPG / PNG'],
|
|
80
|
+
['Capsule Verticale', '300 x 450', '600 x 900', '2:3', 'JPG / PNG'],
|
|
81
|
+
['Bannière Bibliothèque', '1920 x 620', '3840 x 1240', '3.1:1', 'JPG / PNG'],
|
|
82
|
+
['Logo Bibliothèque', '1280 x 720', '1280 x 720', '16:9', 'PNG Transparent'],
|
|
83
|
+
['Icône Communauté', '32 x 32', '184 x 184', '1:1', 'PNG']
|
|
84
|
+
]
|
|
85
|
+
},
|
|
86
|
+
{
|
|
87
|
+
type: 'tip',
|
|
88
|
+
title: 'Optimisation des Zones de Sécurité',
|
|
89
|
+
html: 'Gardez les éléments importants dans les deux tiers supérieurs gauches de l image.'
|
|
90
|
+
},
|
|
91
|
+
{
|
|
92
|
+
type: 'proscons',
|
|
93
|
+
title: 'Évaluation du Processus',
|
|
94
|
+
items: [
|
|
95
|
+
{
|
|
96
|
+
pro: 'Génération instantanée de toutes les dimensions Steam',
|
|
97
|
+
con: 'Les visuels complexes peuvent nécessiter des calques séparés'
|
|
98
|
+
}
|
|
99
|
+
]
|
|
100
|
+
},
|
|
101
|
+
{
|
|
102
|
+
type: 'glossary',
|
|
103
|
+
items: [
|
|
104
|
+
{
|
|
105
|
+
term: 'Capsule',
|
|
106
|
+
definition: 'Terme utilisé par Valve pour désigner les conteneurs d images.'
|
|
107
|
+
}
|
|
108
|
+
]
|
|
109
|
+
}
|
|
110
|
+
],
|
|
111
|
+
faqTitle: 'Foire Aux Questions sur les Images Steam',
|
|
112
|
+
faq: [
|
|
113
|
+
{
|
|
114
|
+
question: 'Quel format de fichier utiliser pour les capsules Steam ?',
|
|
115
|
+
answer: 'Steam accepte les fichiers JPG ou PNG pour les capsules principales.'
|
|
116
|
+
}
|
|
117
|
+
],
|
|
118
|
+
howTo: [
|
|
119
|
+
{
|
|
120
|
+
name: 'Téléverser l Illustration',
|
|
121
|
+
text: 'Sélectionnez une image haute résolution.'
|
|
122
|
+
}
|
|
123
|
+
],
|
|
124
|
+
schemas: [
|
|
125
|
+
{
|
|
126
|
+
'@context': 'https://schema.org',
|
|
127
|
+
'@type': 'SoftwareApplication',
|
|
128
|
+
name: 'Générateur et Prévisualisation de Capsules Steam',
|
|
129
|
+
applicationCategory: 'DeveloperApplication',
|
|
130
|
+
operatingSystem: 'Any',
|
|
131
|
+
offers: {
|
|
132
|
+
'@type': 'Offer',
|
|
133
|
+
price: '0',
|
|
134
|
+
priceCurrency: 'EUR'
|
|
135
|
+
}
|
|
136
|
+
},
|
|
137
|
+
{
|
|
138
|
+
'@context': 'https://schema.org',
|
|
139
|
+
'@type': 'FAQPage',
|
|
140
|
+
mainEntity: [
|
|
141
|
+
{
|
|
142
|
+
'@type': 'Question',
|
|
143
|
+
name: 'Quel format de fichier utiliser pour les capsules Steam ?',
|
|
144
|
+
acceptedAnswer: {
|
|
145
|
+
'@type': 'Answer',
|
|
146
|
+
text: 'Steam accepte les fichiers JPG ou PNG.'
|
|
147
|
+
}
|
|
148
|
+
}
|
|
149
|
+
]
|
|
150
|
+
},
|
|
151
|
+
{
|
|
152
|
+
'@context': 'https://schema.org',
|
|
153
|
+
'@type': 'HowTo',
|
|
154
|
+
name: 'Comment générer des capsules Steam',
|
|
155
|
+
step: [
|
|
156
|
+
{
|
|
157
|
+
'@type': 'HowToStep',
|
|
158
|
+
name: 'Téléverser l Illustration',
|
|
159
|
+
text: 'Sélectionnez une image haute résolution.'
|
|
160
|
+
}
|
|
161
|
+
]
|
|
162
|
+
}
|
|
163
|
+
],
|
|
164
|
+
bibliography: bibliographyEntries
|
|
165
|
+
};
|